Skip to content

DEPLOYMENT_FIX.md

Latest commit

 

History

History
140 lines (106 loc) · 3.36 KB

DEPLOYMENT_FIX.md

File metadata and controls

140 lines (106 loc) · 3.36 KB

Deployment Fix - React 19 Compatibility

Issue

The deployment was failing due to react-splitter-layout@4.0.0 incompatibility with React 19.2.0. The package only supports React 15.5.0 or 16.0.0.

Solution

Replaced react-splitter-layout with react-resizable-panels (v3.0.6), which fully supports React 19.

Changes Made

1. Updated package.json

  • ✅ Removed react-splitter-layout: ^4.0.0 from dependencies
  • ✅ Removed @types/react-splitter-layout: ^4.0.0 from devDependencies
  • ✅ Kept existing react-resizable-panels: ^3.0.6 (already installed)

2. Updated CodeEditor.tsx

Location: app/(routes)/courses/[courseId]/[chapterId]/_components/CodeEditor.tsx

Before:

import dynamic from "next/dynamic";
import "react-splitter-layout/lib/index.css";

const SplitterLayout = dynamic(() => import("react-splitter-layout"), {
  ssr: false,
});

// Used as:
<SplitterLayout vertical percentage primaryMinSize={30} secondaryMinSize={20} secondaryInitialSize={50}>
  <div className="h-full overflow-hidden">
    <SandpackCodeEditor ... />
  </div>
  <div className="h-full overflow-hidden">
    <SandpackPreview ... />
  </div>
</SplitterLayout>

After:

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

// Used as:
<ResizablePanelGroup direction="vertical">
  <ResizablePanel defaultSize={50} minSize={30}>
    <div className="h-full overflow-hidden">
      <SandpackCodeEditor ... />
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50} minSize={20}>
    <div className="h-full overflow-hidden">
      <SandpackPreview ... />
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

3. Updated Exercise Page

Location: app/(routes)/courses/[courseId]/[chapterId]/[exerciseslug]/page.tsx

Before:

import dynamic from "next/dynamic";
import "react-splitter-layout/lib/index.css";

const SplitterLayout = dynamic(() => import("react-splitter-layout"), {
  ssr: false,
});

// Used as:
<SplitterLayout percentage primaryMinSize={40} secondaryInitialSize={60}>
  <div><ContentSection ... /></div>
  <div><CodeEditor ... /></div>
</SplitterLayout>

After:

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

// Used as:
<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={40} minSize={30}>
    <ContentSection ... />
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={60} minSize={40}>
    <CodeEditor ... />
  </ResizablePanel>
</ResizablePanelGroup>

Benefits of react-resizable-panels

  • ✅ Modern, actively maintained package
  • ✅ Full React 19 support
  • ✅ Better TypeScript support
  • ✅ More flexible API
  • ✅ Built-in accessibility features
  • ✅ Better performance (no dynamic imports needed)
  • ✅ Matches your existing UI component style (already using it in the project)

Testing

Run locally to verify:

npm install
npm run dev

Next Steps for Deployment

  1. Commit and push these changes to GitHub
  2. Vercel will automatically rebuild with the fixed dependencies
  3. The build should now succeed without peer dependency conflicts

Files Modified

  • package.json
  • app/(routes)/courses/[courseId]/[chapterId]/_components/CodeEditor.tsx
  • app/(routes)/courses/[courseId]/[chapterId]/[exerciseslug]/page.tsx