fix: use shared webcontainer mode

Author: SamVerschueren

next.config.js

@@ -73,15 +73,7 @@ const nextConfig = {
       ],
     };
   },
-  env: {
-    NEXT_PUBLIC_BASE_URL:
-      process.env.NEXT_PUBLIC_BASE_URL ||
-      (process.env.VERCEL_ENV === 'production'
-        ? 'https://react.dev'
-        : process.env.VERCEL_URL
-        ? `https://${process.env.VERCEL_URL}`
-        : 'http://localhost:3000'),
-  },
+  env: {},
   webpack: (config, {dev, isServer, ...options}) => {
     if (process.env.ANALYZE) {
       const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');

package.json

@@ -30,7 +30,7 @@
     "@docsearch/react": "^3.8.3",
     "@headlessui/react": "^1.7.0",
     "@radix-ui/react-context-menu": "^2.1.5",
-    "@webcontainer/react": "^0.0.2",
+    "@webcontainer/react": "^0.0.3",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
     "debounce": "^1.2.1",

src/components/MDX/Sandpack/templates/index.ts

@@ -1,5 +1,4 @@
 import {defineTemplate} from '@webcontainer/react';
-import {hideFiles} from './utils';
 import viteReactPackageJson from './vite-react/package-json.json';
 import viteReactPackageLockJson from './vite-react/package-lock-json.json';
 import viteRscPackageJson from './vite-rsc/package-json.json';
@@ -14,42 +13,58 @@ const startCommand: [string, ...string[]] = [
 
 export const viteReactTemplate = defineTemplate({
   id: 'vite-react',
-  files: hideFiles({
-    '/vite.config.js':
-      require('!raw-loader?esModule=false!./vite-react/vite.config.js') as string,
-    '/index.html':
-      require('!raw-loader?esModule=false!./vite-react/index.html') as string,
-    '/src/index.jsx':
-      require('!raw-loader?esModule=false!./vite-react/src/index.jsx') as string,
-  }),
+  serverMode: 'shared',
+  sharedFiles: {
+    '/vite.config.js': {
+      code: require('!raw-loader?esModule=false!./vite-react/vite.config.js') as string,
+    },
+  },
+  appFiles: {
+    '/index.html': {
+      code: require('!raw-loader?esModule=false!./vite-react/index.html') as string,
+    },
+    '/src/index.jsx': {
+      code: require('!raw-loader?esModule=false!./vite-react/src/index.jsx') as string,
+    },
+  },
   environment: {
-    packageJson: JSON.stringify(viteReactPackageJson),
-    packageLockJson: JSON.stringify(viteReactPackageLockJson),
+    packageJson: JSON.stringify(viteReactPackageJson, null, 2),
+    packageLockJson: JSON.stringify(viteReactPackageLockJson, null, 2),
     startCommand,
   },
 });
 
 export const viteRscTemplate = defineTemplate({
   id: 'vite-rsc',
-  files: hideFiles({
-    '/src/framework/entry.browser.jsx':
-      require('!raw-loader?esModule=false!./vite-rsc/src/framework/entry.browser.jsx') as string,
-    '/src/framework/entry.rsc.jsx':
-      require('!raw-loader?esModule=false!./vite-rsc/src/framework/entry.rsc.jsx') as string,
-    '/src/framework/entry.ssr.jsx':
-      require('!raw-loader?esModule=false!./vite-rsc/src/framework/entry.ssr.jsx') as string,
-    '/src/framework/error-boundary.jsx':
-      require('!raw-loader?esModule=false!./vite-rsc/src/framework/error-boundary.jsx') as string,
-    '/src/framework/request.jsx':
-      require('!raw-loader?esModule=false!./vite-rsc/src/framework/request.jsx') as string,
-    '/src/root.jsx':
-      require('!raw-loader?esModule=false!./vite-rsc/src/root.jsx') as string,
-    '/vite.config.js':
-      require('!raw-loader?esModule=false!./vite-rsc/vite.config.js') as string,
-  }),
+  serverMode: 'shared',
+  sharedFiles: {
+    '/vite.config.js': {
+      code: require('!raw-loader?esModule=false!./vite-rsc/vite.config.js') as string,
+    },
+    '/src/framework/entry.browser.jsx': {
+      code: require('!raw-loader?esModule=false!./vite-rsc/src/framework/entry.browser.jsx') as string,
+    },
+    '/src/framework/entry.rsc.jsx': {
+      code: require('!raw-loader?esModule=false!./vite-rsc/src/framework/entry.rsc.jsx') as string,
+    },
+    '/src/framework/entry.ssr.jsx': {
+      code: require('!raw-loader?esModule=false!./vite-rsc/src/framework/entry.ssr.jsx') as string,
+    },
+    '/src/framework/error-boundary.jsx': {
+      code: require('!raw-loader?esModule=false!./vite-rsc/src/framework/error-boundary.jsx') as string,
+    },
+    '/src/framework/request.jsx': {
+      code: require('!raw-loader?esModule=false!./vite-rsc/src/framework/request.jsx') as string,
+    },
+  },
+  appFiles: {
+    '/src/root.jsx': {
+      code: require('!raw-loader?esModule=false!./vite-rsc/src/root.jsx') as string,
+    },
+  },
   environment: {
-    packageJson: JSON.stringify(viteRscPackageJson),
-    packageLockJson: JSON.stringify(viteRscPackageLockJson),
+    packageJson: JSON.stringify(viteRscPackageJson, null, 2),
+    packageLockJson: JSON.stringify(viteRscPackageLockJson, null, 2),
     startCommand,
   },
 });

src/components/MDX/Sandpack/templates/utils.ts

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="./src/index.jsx"></script>
   </body>
 </html>

src/components/MDX/Sandpack/templates/vite-react/index.html

@@ -7,10 +7,12 @@
   },
   "dependencies": {
     "html-format": "^1.1.7",
+    "immer": "^11.1.4",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-error-boundary": "^4.1.1",
-    "rsc-html-stream": "^0.0.7"
+    "rsc-html-stream": "^0.0.7",
+    "use-immer": "^0.11.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^5.1.4",