New error: react imports are undefined or empty objects

Author: mattcarrollcode

next.config.js

@@ -14,10 +14,10 @@ const nextConfig = {
     scrollRestoration: true,
     // legacyBrowsers: false,
     reactCompiler: true,
-    staleTimes: {
-      dynamic: 30,
-      static: 180,
-    },
+    // staleTimes: {
+    //   dynamic: 30,
+    //   static: 180,
+    // },
   },
   env: {},
   webpack: (config, {dev, isServer, ...options}) => {

src/components/MDX/Sandpack/index.tsx

@@ -46,6 +46,10 @@ const SandpackGlimmer = ({code}: {code: string}) => (
 );
 
 export default memo(function SandpackWrapper(props: any): any {
+  console.log(`\n\n\nprops ${JSON.stringify(props)}`);
+  console.log(`\n\n\nprops.children ${JSON.stringify(props.children)}`);
+  console.log(`\n\n\nChildren ${JSON.stringify(Children)}`);
+  console.log(`\n\n\nSuspense ${JSON.stringify(Suspense)}`);
   const codeSnippet = createFileMap(Children.toArray(props.children));
 
   // To set the active file in the fallback we have to find the active file first.

src/pages/[[...markdownPath]].js

@@ -88,7 +88,7 @@ function reviveNodeOnClient(key, val) {
       type = Fragment;
     }
     return {
-      $$typeof: Symbol.for('react.element'),
+      $$typeof: Symbol.for('react.transitional.element'),
       type: type,
       key: key,
       ref: ref,