vite: Exported variable in chunk is not defined

Describe the bug

Some interaction between the packages @material-ui/core@4.11.0, @material-ui/icons@4.9.1 and @material-ui/pickers@4.0.0-alpha.12 leads to a chunk being generated which exports a variable that is not defined. In the browser’s console:

Uncaught ReferenceError: makeStyles_default is not defined
    at Object.makeStyles (index.js:1)
    at Object.get [as makeStyles] (chunk.5ZFU4BUR.js?v=c903acc3:25)
    at main.js:3

This problem only seems to occur in specific circumstances. Depending on what the application imports Vite appears to generate different chunks. In some cases the chunk generated contains the error described above, in other cases it does not. I describe those cases in the reproduction.

Reproduction

https://gist.github.com/183adfb90326072f2f99522d01635497

git clone git@gist.github.com:183adfb90326072f2f99522d01635497.git vite-bug-1853
cd vite-bug-1853/
npm i && npm run dev

Open the Vite dev server and observe the following error in the browser console:

Uncaught ReferenceError: makeStyles_default is not defined
    at Object.makeStyles (index.js:1)
    at Object.get [as makeStyles] (chunk.5ZFU4BUR.js?v=c903acc3:25)
    at main.js:3

Now, stop the dev server. Edit main.js like so:

- import Delete from "@material-ui/icons/Delete"
+ import { Delete } from "@material-ui/icons"

then run rm -r node_modules/.vite && npm run dev and open the server again. You should not observe any error and instead see “Hello, world” on the page.

I investigated the behaviour and it would appear that Vite builds chunks with a radically different content for @material-ui/core in the two scenarios I just outlined. I am not sure what triggers this change in behaviour (evidently something to do with the deep import of the icon). In any case, the chunk generated in one of the scenarios is broken. I don’t know if this is due to a problem in Material UI itself or a problem with Vite; I haven’t gotten deep enough in my investigation to judge.

You can get this from the reproduction but you can clearly see in this Gist what’s going on: https://gist.github.com/hmaurer/c0e17b79532dc0cc584831b2f5d641e3. The @material-ui_core.good.js file contains both an import for makeStyles_default and an export makeStyles_default as makeStyles, whereas the @material-ui_core.buggy.js file contains an export makeStyles: () => makeStyles_default but no import or definition for makeStyles_default!

System Info

vite version: 2.0.0-beta.62
Operating System: MacOS Catalina
Node version: v14.9.0
Package manager (npm/yarn/pnpm) and version: NPM v6.14.8

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 27
Comments: 20 (4 by maintainers)

Most upvoted comments

Following config works for me:

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";

export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: [
      {
        find: /^@material-ui\/icons\/(.*)/,
        replacement: "@material-ui/icons/esm/$1",
      },
      {
        find: /^@material-ui\/core\/(.+)/,
        replacement: "@material-ui/core/es/$1",
      },
      {
        find: /^@material-ui\/core$/,
        replacement: "@material-ui/core/es",
      },
    ],
  },
  define: {
    global: "window", // fix for packages that support both node and browser
  },
});

+21

abdusco on Mar 24, 2021

This looks like a legit bug in esbuild - probably related to https://github.com/evanw/esbuild/issues/706, but this one actually generates a reference to an undefined variable.

yyx990803 on Feb 3, 2021

This should be fixed by #2976 / #3282, released in v2.3.0

nihalgonsalves on May 11, 2021

Would someone be interested in added an official Material-UI + Vite example in the MUI repo? https://github.com/mui-org/material-ui/issues/21377

oliviertassinari on May 2, 2021

tdt any others solutions ?

import Delete from "@material-ui/icons/Delete"
This import is importing a CJS file which transitively require()s an ESM file in @material-ui/core, which causes the entire @material-ui entry to bail out to CJS…

If you have control over this, use @material-ui/icons/esm/Delete instead.

I try it but i doesn’t work

ayamanemissouri on Mar 4, 2021

Confirmed that updating esbuild fixes this. In addition to vite 2.2.3 I added esbuild 0.11.17 and then (using yarn) added

"resolutions": {
    "esbuild": "0.11.17"
  }

which forces vite to use the newer package.

akhudek on May 2, 2021

@Hebilicious I have similar issue, and in my code import CircularProgress from "@material-ui/core/CircularProgress"; works fine. If anyone is investigating this, here’s the situation I have observed:

import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import {
  createStyles,
  makeStyles,
  Theme,
  Grid,
  Button,
  TextField,
  InputAdornment,
  IconButton,
  Tooltip,
  Switch,
  FormControlLabel,
} from "@material-ui/core";

would cause Error:

client:188 ReferenceError: createStyles is not defined
    at Object.createStyles (index.js:1)
    at Object.get [as createStyles] (chunk.UQCKUTMR.js?v=a895762e:12)
    at App.tsx:19

while after I moved createStyles and makeStyles 's import from "@material-ui/core" to "@material-ui/core/styles", it works fine.

Xadoy on Feb 17, 2021

I’m having same problem. None of the solutions above worked for me. The code works perfectly fine when I run yarn build, but I’m having various problems related to material UI. when I run yarn dev

I get the following error: Uncaught ReferenceError: Grid_default is not defined When I import it like that:

import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

The problem is solved by importing it as import Grid from @material-ui/core/Grid, but then, the makeStyles starts to give the same error.

Man material UI is seriously awfull with anything esbuild 😄 I was having a lot of trouble when I tried to migrate our application to snowpack as well, all related to material UI.

fatihdogmus on Apr 8, 2021