Make Toolpad apps compatible with pnpm (#3074)

Signed-off-by: Jan Potoms <[email protected]>
mui · Jan 12, 2024 · e173a8b · e173a8b
1 parent 53ebec7
commit e173a8b
Showing 1 changed file with 25 additions and 62 deletions.
diff --git a/packages/toolpad-app/src/server/toolpadAppBuilder.ts b/packages/toolpad-app/src/server/toolpadAppBuilder.ts
@@ -13,6 +13,12 @@ import.meta.url ??= url.pathToFileURL(__filename).toString();
 const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
 
 const MAIN_ENTRY = '/main.tsx';
+const FALLBACK_MODULES = [
+  '@mui/material',
+  '@mui/icons-material',
+  '@mui/x-data-grid',
+  '@mui/x-charts',
+];
 
 export function getHtmlContent() {
   return `
@@ -41,10 +47,20 @@ function toolpadVitePlugin(): Plugin {
   return {
     name: 'toolpad',
 
-    async resolveId(id) {
+    async resolveId(id, parent) {
       if (id.endsWith('.html')) {
         return id;
       }
+      const hasFallback = FALLBACK_MODULES.some(
+        (moduleName) => moduleName === id || id.startsWith(`${moduleName}/`),
+      );
+      if (hasFallback) {
+        const [userMod, fallbackMod] = await Promise.all([
+          this.resolve(id, parent),
+          this.resolve(id, currentDirectory),
+        ]);
+        return userMod || fallbackMod;
+      }
       return null;
     },
 
@@ -263,6 +279,7 @@ if (import.meta.hot) {
       },
       envFile: false,
       resolve: {
+        dedupe: FALLBACK_MODULES,
         alias: [
           {
             // FIXME(https://github.com/mui/material-ui/issues/35233)
@@ -279,6 +296,10 @@ if (import.meta.hot) {
               ? 'virtual:toolpad-files:canvas.tsx'
               : 'virtual:toolpad-files:main.tsx',
           },
+          {
+            find: '@mui/toolpad',
+            replacement: path.resolve(currentDirectory, '../exports'),
+          },
         ],
       },
       server: {
@@ -287,70 +308,12 @@ if (import.meta.hot) {
         },
       },
       optimizeDeps: {
-        include: [
-          '@emotion/cache',
-          '@emotion/react',
-          '@mui/icons-material',
-          '@mui/icons-material/ArrowDropDownRounded',
-          '@mui/icons-material/Close',
-          '@mui/icons-material/Delete',
-          '@mui/icons-material/DarkMode',
-          '@mui/icons-material/Edit',
-          '@mui/icons-material/Error',
-          '@mui/icons-material/HelpOutlined',
-          '@mui/icons-material/LightMode',
-          '@mui/icons-material/OpenInNew',
-          '@mui/icons-material/SettingsBrightnessOutlined',
-          '@mui/lab',
-          '@mui/material',
-          '@mui/material/CircularProgress',
-          '@mui/material/Button',
-          '@mui/material/colors',
-          '@mui/material/styles',
-          '@mui/material/useMediaQuery',
-          '@mui/utils',
-          '@mui/utils/useEventCallback',
-          '@mui/x-data-grid-pro',
-          '@mui/x-date-pickers/AdapterDayjs',
-          '@mui/x-date-pickers/DesktopDatePicker',
-          '@mui/x-date-pickers/LocalizationProvider',
-          '@mui/x-license-pro',
-          '@tanstack/react-query',
-          '@tanstack/react-query-devtools/build/modern/production.js',
-          'dayjs',
-          'dayjs/locale/en',
-          'dayjs/locale/fr',
-          'dayjs/locale/nl',
-          'fractional-indexing',
-          'invariant',
-          'lodash-es',
-          'markdown-to-jsx',
-          'nanoid/non-secure',
-          'prop-types',
-          'react',
-          'react-dom',
-          'react-dom/client',
-          'react-error-boundary',
-          'react-hook-form',
-          'react-is',
-          'react-router-dom',
-          'react/jsx-dev-runtime',
-          'react/jsx-runtime',
-          'recharts',
-          'superjson',
-          'title',
-          'zod',
-        ],
-        exclude: [
-          '@mui/toolpad-core',
-          '@mui/toolpad/browser',
-          '@mui/toolpad/runtime',
-          '@mui/toolpad/canvas',
-        ],
+        entries: [MAIN_ENTRY],
+        include: FALLBACK_MODULES.map((moduleName) => `@mui/toolpad > ${moduleName}`),
       },
       appType: 'custom',
       logLevel: 'info',
-      root,
+      root: currentDirectory,
       plugins: [virtualToolpadFiles, react(), toolpadVitePlugin(), ...plugins],
       base,
       define: {