Problems building with material-ui when migrating from webpack

[lsrugo]

I am trying to migrate a project from CRA to Vite. When I run vite it works fine but vite build throws this error:

[vite]: Rollup failed to resolve import "jss-plugin-window" from "node_modules/@material-ui/styles/esm/jssPreset/jssPreset.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "jss-plugin-window" from "node_modules/@material-ui/styles/esm/jssPreset/jssPreset.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (/workspaces/yjl-mivtzoim-frontend/node_modules/vite/dist/node/chunks/dep-4a9cff06.js:43777:19)
    at onwarn (/workspaces/yjl-mivtzoim-frontend/node_modules/vite/dist/node/chunks/dep-4a9cff06.js:43555:13)
    at Object.onwarn (/workspaces/yjl-mivtzoim-frontend/node_modules/rollup/dist/shared/rollup.js:23037:13)
    at ModuleLoader.handleResolveId (/workspaces/yjl-mivtzoim-frontend/node_modules/rollup/dist/shared/rollup.js:22381:26)
    at /workspaces/yjl-mivtzoim-frontend/node_modules/rollup/dist/shared/rollup.js:22358:26

In my package.json I have

"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",

[iakovosvo]

Getting the exact same error.

[Ankit27kumar]

have you solve this?
_

[Digital-Coder]

has anyone solved this ?

[Digital-Coder]

I had @esbuild-plugins/node-globals-polyfill and removing it solved my issue.

[MarisLi]

Could you please share vite.config.ts?

I had similar issue and problem was in define option. One of the values was modifying import statement and updating it solved my issue.

[Nefcanto]

This is my vite.config.js:

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
const path = require(`path`)
const aliases = {
  '@Form': 'src/Components/Form/Exports',
  '@List': 'src/Components/List/Exports',
  '@Browse': 'src/Components/Browse/Browse',
  '@Tree': 'src/Components/Tree/Exports',
  '@Tab': 'src/Components/Tab/Exports',
  '@Dashboard': 'src/Components/Dashboard/Dashboard',
  '@Panel': 'src/Panel/Panel',
}

const resolvedAliases = Object.fromEntries(
  Object.entries(aliases).map(([key, value]) => [key, path.resolve(__dirname, value)]),
)

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, '.')

  console.log(env)

  const htmlPlugin = () => {
    return {
      name: "html-transform",
      transformIndexHtml(html) {
        return html.replace(/%(.*?)%/g, function (match, p1) {
          return env[p1]
        })
      },
    }
  }

  return {
    resolve: {
      alias: resolvedAliases
    },
    plugins: [react(), htmlPlugin()],
    server: {
      host: '0.0.0.0',
      hmr: {
        clientPort: 443
      }
    }
  }
})

And this is the error I get (everything works for npm run dev but things fail for npm run build):

vite v2.9.9 building for production...
<script src="%VITE_ACCOUNTS_URL%/auth/js/keycloak.js"> in "/index.html" can't be bundled without type="module" attribute
transforming...
✓ 274 modules transformed.
[vite]: Rollup failed to resolve import "@mui/icons-material/Article" from "../../Blog/Admin/Exports.jsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "@mui/icons-material/Article" from "../../Blog/Admin/Exports.jsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (/Infra/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:41489:19)
    at onwarn (/Infra/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:41305:13)
    at Object.onwarn (/Infra/node_modules/rollup/dist/shared/rollup.js:23330:13)
    at ModuleLoader.handleResolveId (/Infra/node_modules/rollup/dist/shared/rollup.js:22614:26)
    at /Infra/node_modules/rollup/dist/shared/rollup.js:22575:26
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

What should I do?

[pedro199288]

maybe adding type="module" to the script in your html fix everything? I'm using @mui/icons-material and it doesn't give me any problem 🤔

[dan-newscorp]

Having the exact same issue. Had anyone found a solution?

[pedro199288]

The only solution for me has been replacing the package using "jss-plugin-window" which in my case was @mui/styles but also could be @material-ui/styles. There are good reasons to replace this package as indicated in this page: https://mui.com/system/styles/basics/

Basically, it is deprecated in material-ui v5 (mui) and is not compatible with React 18. So is not a good choice if you plan to use react 18 at some point

[AntonOfTheWoods]

jss is 100% usable in React 18, and there are plenty of ways to use jss outside of MUI. I have some usecases where React + MUI is far too slow and bloated and use inferno and jss (via tss-react or just jss) for those.

[leriel]

I found out that using custom alias for jss plugins allows to fix that. Full config:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
    build: {
        commonjsOptions: {
            transformMixedEsModules: true,
        },
    },
    plugins: [react()],
    resolve: {
        alias: [
            {
                find: /^jss-plugin-(.*)$/,
                replacement: "$1",
                customResolver: (id) => {
                    if (id === "{}") {
                        id = "global";
                    }
                    return resolve(__dirname, `./node_modules/jss-plugin-${id}/src/index.js`);
                },
            },
        ],
    },
});

Replacing {} with global (jss-plugin-{} with jss-plugin-global) was a very specific case for me which might have been caused by third party library causing issue in the resolve chain (or might not). In theory, this should be enough:

        alias: [
            {
                find: /^jss-plugin-(.*)$/,
                replacement: resolve(__dirname, './node_modules/jss-plugin-$1/src/index.js'),
            },
        ],

I'm not sure anymore if transformMixedEsModules is necessary here or not. Including it just in case

[leriel]

After more study, my issue came from

define: {
  global: {}
}

Getting rid of that solved the issue for me without requiring workaround

@lsrugo very good chance your issue is similar and you had something like

define: {
  global: 'window'
}

in your config

[drwpow]

This fixed my issue. Vite was replacing every appearance of global as window and I had the 2nd example in my config 👆

[vhscom]

Consider using 'globalThis' and not 'window' as window applies only to browsers and may not function as expected when, for example, using something like happy-dom to test code or running code with service workers.

[maxponmar]

In my case I installed @mui/system as the npm page says an it worked:
https://www.npmjs.com/package/@mui/x-date-pickers

[f30v]

This worked for me as well!

[Booligoosh]

This is likely due to having { define: { global: {} } }, { define: { global: "window" } } or { define: { global: "globalThis" } } in your Vite config, as others have mentioned.

However, the Vite docs specifically warn against doing this, as it basically acts as a giant find-and-replace, changing things like jss-plugin-global to jss-plugin-window or jss-plugin-{}.

A way to fix this is to get rid of the define in your config, and instead put something like this at the top of your index.js/index.tsx:

if (typeof window.global === "undefined") window.global = window;

[leriel]

Thanks, that's nice and elegant.

However, this could cause issues with some problematic third party packages which in the end need having define set up one way or another when using vite. I recall having define in optimizeDeps/esbuildOptions solved the issue without breaking:

{optimizeDeps : {esbuildOptions: {define: {global: "globalThis"}}}}

[mgr-tsc]

Thanks, I don't really understand what happens behind scenes, but this answer definitely solve my issue. Thanks

[umut-firat]

I was converting my old CRA codebase to vite yesterday and suddenly got this problem when I tried to build my application. My solution was to replace "makeStyles" import from "@material-ui/styles" to "@material-ui/core" and it all worked. I hope it helps.

MUI: v4.11.0
Vite: v5.3.4