Next15 and React Complier working when built and run but dev server imports are broken

Author: mattcarrollcode

next.config.js

@@ -8,17 +8,9 @@
 const nextConfig = {
   pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
   reactStrictMode: true,
-  // bundlePagesRouterDependencies: true,
   experimental: {
-    // TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed
-    // appDir: false,
     scrollRestoration: true,
-    // legacyBrowsers: false,
-    // reactCompiler: true,
-    // staleTimes: {
-    //   dynamic: 30,
-    //   static: 180,
-    // },
+    reactCompiler: true,
   },
   env: {},
   webpack: (config, {dev, isServer, ...options}) => {

package.json

@@ -34,7 +34,7 @@
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
     "github-slugger": "^1.3.0",
-    "next": "^15.0.0-canary.43",
+    "next": "^15.0.0-rc.0",
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
     "react": "^19.0.0-rc-8971381549-20240625",
@@ -63,7 +63,7 @@
     "autoprefixer": "^10.4.2",
     "babel-eslint": "10.x",
     "eslint": "7.x",
-    "eslint-config-next": "^15.0.0-rc.0",
+    "eslint-config-next": "12.0.3",
     "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-flowtype": "4.x",
     "eslint-plugin-import": "2.x",

src/components/Layout/HomeContent.js

@@ -915,6 +915,7 @@ function Example1() {
           isFromPackageImport={false}
           noShadow={true}
           noMargin={true}>
+          {/* eslint-disable-next-line react/no-unknown-property */}
           <div meta={meta}>{`function Video({ video }) {
   return (
     <div>
@@ -987,6 +988,7 @@ function Example2() {
           isFromPackageImport={false}
           noShadow={true}
           noMargin={true}>
+          {/* eslint-disable-next-line react/no-unknown-property */}
           <div meta={meta}>{`function VideoList({ videos, emptyHeading }) {
   const count = videos.length;
   let heading = emptyHeading;
@@ -1078,6 +1080,7 @@ function Example3() {
           isFromPackageImport={false}
           noShadow={true}
           noMargin={true}>
+          {/* eslint-disable-next-line react/no-unknown-property */}
           <div meta={meta}>{`import { useState } from 'react';
 
 function SearchableVideoList({ videos }) {
@@ -1149,6 +1152,7 @@ function Example4() {
           isFromPackageImport={false}
           noShadow={true}
           noMargin={true}>
+          {/* eslint-disable-next-line react/no-unknown-property */}
           <div meta={meta}>{`import { db } from './database.js';
 import { Suspense } from 'react';
 

src/components/MDX/CodeDiagram.tsx

@@ -17,6 +17,7 @@ export function CodeDiagram({children, flip = false}: CodeDiagramProps) {
   });
   const content = Children.toArray(children).map((child: any) => {
     if (child.type?.mdxName === 'pre') {
+      // eslint-disable-next-line react/jsx-key
       return <CodeBlock {...child.props} noMargin={true} noMarkers={true} />;
     } else if (child.type === 'img') {
       return null;

src/pages/_document.tsx

@@ -87,7 +87,6 @@ const MyDocument = () => {
                     }
                   }
                   const uwuQueryParam = checkQueryParam();
-                  console.log('uwuQueryParam', uwuQueryParam);
                   if (uwuQueryParam != null) {
                     setUwu(uwuQueryParam);
                   } else if (checkLocalStorage()) {