Exported variable in chunk is not defined #1853

hmaurer · 2021-02-02T22:22:26Z

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

The text was updated successfully, but these errors were encountered:

hmaurer · 2021-02-02T22:24:31Z

PS: I am not exactly sure why but I couldn't get a reproduction without also importing the package @material-ui/pickers.

yyx990803 · 2021-02-03T04:12:12Z

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.

yyx990803 · 2021-02-03T04:19:07Z

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

hmaurer · 2021-02-03T10:09:13Z

Thanks for looking into this @yyx990803 ! Should I report it upstream, or do you think your mention of this issue in evanw/esbuild#706 is enough?

Hebilicious · 2021-02-08T23:38:48Z

I have just ran into the same issue trying to migrate the main UI of our product from CRA to Vite, as a proof of concept to see if we can migrate without too much hassle 🚀.

It seems Material-UI is the main culprit (and I wouldn't be surprised), although I am not 100% sure.

@yyx990803 Comment did the trick for the icons.

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.

However I'm encountering another (similar) issue :

This happens with other Material components as well. I'm not sure if this is directly related to the issue described in the previous messages. I'm guessing that one of the dependencies is doing something "wrong" with the module types and it causes issues ?

@hmaurer did you encounter the same issue with the components not being defined ?

Is there any workaround I could try ?

Here's the deps scan below :

  vite:deps Scan completed in 423ms: {
  react: '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/react/index.js',
  'react-dom': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/react-dom/index.js',
  '@apollo/react-common': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@apollo/react-common/lib/react-common.esm.js',
  notistack: '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/notistack/dist/notistack.esm.js',
  '@material-ui/core': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/core/esm/index.js',
  'react-router': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/react-router/esm/react-router.js',
  '@material-ui/pickers': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/pickers/esm/index.js',
  '@date-io/date-fns': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@date-io/date-fns/build/index.esm.js',
  'apollo-boost': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/apollo-boost/lib/bundle.esm.js',
  'query-string': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/query-string/index.js',
  'react-router-dom': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/react-router-dom/esm/react-router-dom.js',
  '@material-ui/core/styles': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/core/esm/styles/index.js',
  jss: '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/jss/dist/jss.esm.js',
  formik: '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/formik/dist/formik.esm.js',
  history: '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/history/esm/history.js',
  clsx: '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/clsx/dist/clsx.m.js',
  'graphql-tag': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/graphql-tag/src/index.js',
  '@material-ui/lab/Skeleton': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/lab/esm/Skeleton/index.js',
  '@material-ui/icons/esm/DoneAll': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/DoneAll.js',
  '@apollo/react-hooks': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@apollo/react-hooks/index.esm.js',
  '@material-ui/icons/esm/Menu': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Menu.js',
  '@material-ui/icons/esm/Delete': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Delete.js',
  '@material-ui/icons/esm/NavigateNext': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/NavigateNext.js',
  '@material-ui/icons/esm/Settings': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Settings.js',
  lodash: '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/lodash/lodash.js',
  '@material-ui/icons/esm/FileCopyRounded': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/FileCopyRounded.js',
  '@material-ui/icons/esm/InfoOutlined': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/InfoOutlined.js',
  'formik-material-ui': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/formik-material-ui/dist/formik-material-ui.es6.js',
  '@material-ui/icons/esm/WarningRounded': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/WarningRounded.js',
  '@material-ui/icons/esm/EditRounded': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/EditRounded.js',
  '@material-ui/core/Tooltip': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/core/esm/Tooltip/index.js',
  '@material-ui/icons/esm/Search': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Search.js',
  '@material-ui/icons/esm/ToggleOff': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/ToggleOff.js',
  '@material-ui/icons/esm/ToggleOn': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/ToggleOn.js',
  yup: '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/yup/es/index.js',
  uuid: '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/uuid/dist/esm-browser/index.js',
  '@nivo/line': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@nivo/line/dist/nivo-line.es.js',
  'date-fns': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/date-fns/esm/index.js',
  '@material-ui/icons/esm/CheckCircleRounded': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/CheckCircleRounded.js',
  '@material-ui/icons/esm/DesktopMac': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/DesktopMac.js',
  '@material-ui/icons/esm/CancelOutlined': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/CancelOutlined.js',
  '@material-ui/core/styles/makeStyles': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/core/styles/makeStyles.js',
  '@material-ui/icons/esm/ArrowDropDownRounded': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/ArrowDropDownRounded.js',
  '@material-ui/icons/esm/Close': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Close.js',
  '@material-ui/icons/esm/ArrowRightRounded': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/ArrowRightRounded.js',
  '@nivo/pie': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@nivo/pie/dist/nivo-pie.es.js',
  '@material-ui/icons/esm/FilterList': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/FilterList.js',
  '@material-ui/icons/esm/BarChart': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/BarChart.js',
  '@deepcrawl/lucene-regex-validator': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@deepcrawl/lucene-regex-validator/lib/index.js',
  '@material-ui/icons/esm/Help': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Help.js',
  pluralize: '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/pluralize/pluralize.js',
  '@material-ui/lab/Alert': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/lab/esm/Alert/index.js',
  '@nivo/bar': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@nivo/bar/dist/nivo-bar.es.js',
  '@material-ui/icons/esm/FolderRounded': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/FolderRounded.js',
  '@material-ui/icons/esm/Person': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Person.js',
  '@material-ui/icons/esm/FolderOpenRounded': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/FolderOpenRounded.js',
  '@material-ui/icons/esm/FormatIndentIncrease': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/FormatIndentIncrease.js',
  '@material-ui/icons/esm/Build': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Build.js',
  'material-ui-popup-state/hooks': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/material-ui-popup-state/hooks.js',
  '@material-ui/icons/esm/Link': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Link.js',
  'json-to-graphql-query': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/json-to-graphql-query/lib/index.js',
  '@material-ui/icons/esm/Traffic': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Traffic.js',
  '@material-ui/icons/esm/StayCurrentPortrait': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/StayCurrentPortrait.js',
  '@material-ui/icons/esm/Description': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Description.js',
  '@material-ui/icons/esm/Speed': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Speed.js',
  '@material-ui/icons/esm/CompareArrows': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/CompareArrows.js',
  '@material-ui/icons/esm/Code': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Code.js',
  '@material-ui/icons/esm/LibraryBooks': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/LibraryBooks.js',
  'formik-material-ui-lab': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/formik-material-ui-lab/dist/formik-material-ui.es6.js',
  'material-ui-popup-state/HoverPopover': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/material-ui-popup-state/HoverPopover.js',
  'react-fast-compare': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/react-fast-compare/index.js',
  'lodash/debounce': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/lodash/debounce.js',
  '@material-ui/icons/esm/Clear': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Clear.js',
  '@material-ui/icons/esm/GetApp': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/GetApp.js',
  '@material-ui/icons/esm/OpenInNew': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/OpenInNew.js',
  'formik-material-ui-pickers': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/formik-material-ui-pickers/dist/formik-material-ui-pickers.es6.js',
  '@material-ui/icons/esm/TrendingUp': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/TrendingUp.js',
  '@material-ui/icons/esm/ViewList': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/ViewList.js',
  '@material-ui/icons/esm/AccountTree': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/AccountTree.js',
  '@material-ui/icons/esm/Public': '/home/hebilicious/deepcrawl/core-ui/test-react-ts/node_modules/@material-ui/icons/esm/Public.js'
}

Xadoy · 2021-02-17T14:50:37Z

@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.

ayamanemissouri · 2021-03-04T10:35:44Z

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

davidbonnet · 2021-03-08T19:48:38Z

The following vite.config.js excerpt could work as a workaround:

export default defineConfig({
  // …
  resolve: {
    alias: {
      lodash: 'lodash-es',
      '@material-ui/core': './node_modules/@material-ui/core/esm',
      '@material-ui/icons': './node_modules/@material-ui/icons/esm',
      '@material-ui/styles': './node_modules/@material-ui/styles/esm',
      'hoist-non-react-statics':  './node_modules/hoist-non-react-statics/src/index.js',
    },
  },
  // …
})

This requires imports to be done this way:

import { Icon } from '@material-ui/icons'
import { Component } from '@material-ui/core'
import { withStyles } from '@material-ui/core/styles'

abdusco · 2021-03-24T08:28:53Z

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
  },
});

chetanchandel31 · 2021-03-29T11:09:12Z

I'm facing a similar issue, import { Delete } from "@material-ui/icons"; works fine for me but my app breaks upon adding import { makeStyles } from "@material-ui/core/styles";

This is the error i get in console: Uncaught SyntaxError: The requested module '/@modules/prop-types/index.js' does not provide an export named 'default'

oliviertassinari · 2021-03-31T11:28:57Z

In #1853 (comment) would replacing /es with /esm work? I'm asking because es is only meant to be used by advanced users that want to transpile for specific browser targets.

M0hammedImran · 2021-03-31T13:28:35Z

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
  },
});

This worker for me. 🎉
But I added this, I'm not sure if this affects the original.

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

export default defineConfig({
    plugins: [reactRefresh(), svgr()],
    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',
    },
    optimizeDeps: {
        include: [
            '@material-ui/core',
            '@material-ui/icons',
            '@material-ui/styles',
        ],
    },
});

fadi-george · 2021-03-31T17:18:06Z

For me at least, I didn't need any alias changes or messing with optimizeDeps

kjeske · 2021-04-01T07:55:38Z

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

It seems like it's fixed in esbuild v0.11+

fatihdogmus · 2021-04-08T11:01:27Z

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.

PRossetti · 2021-04-30T01:01:19Z

I was able to make it work by doing a pristine install like this:

Updated my vite version in my package.json to be "vite": "2.2.3"
rm -rf node_modules && rm package-lock.json && npm cache clear --force && npm i

My vite.config.js file:

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

export default defineConfig({
  plugins: [reactRefresh()],
  build: {
    minify: process.env.ENV === 'development' ? false : 'terser',
    outDir: 'dist', // this is the defautl value
    sourcemap: false // this is the defautl vallue
  }
})

My tsconfig.json file:

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "allowUnreachableCode": false,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "build",
    "sourceMap": true
  },
  "include": ["./src/**/*.ts"]
}

Please let me know if it helps anybody!
Regards!

gubo97000 · 2021-05-02T17:29:21Z

My packages:

@material-ui/core@v5.0.0-alpha.32
@material-ui/icons@v5.0.0-alpha.29
vite@v2.2.3

Hi, I had this problem too from importing an icon:

//This statement makes npm run dev implode
import Sort from "@material-ui/icons/Sort"
//This statement makes npm run build implode (EMFILE error)
import {Sort} from "@material-ui/icons"

For now I solved both problems by importing the icon with the first import statement ("@material-ui/icons/Sort") and by adding only this alias to vite.config:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  base:"/aniCheck/",
  resolve: {
    alias: [
        {
            find: /^@material-ui\/icons\/(.*)/,
            replacement: '@material-ui/icons/esm/$1',
        },
    ],
},
})

oliviertassinari · 2021-05-02T17:31:56Z

Would someone be interested in added an official Material-UI + Vite example in the MUI repo? mui/material-ui#21377

akhudek · 2021-05-02T18:54:05Z

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.

nihalgonsalves · 2021-05-11T10:19:37Z

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

hmaurer added the pending triage label Feb 2, 2021

yyx990803 added bug: upstream Bug in a dependency of Vite and removed pending triage labels Feb 3, 2021

xueqingxiao mentioned this issue Mar 4, 2021

[examples] Add example demo with vite mui/material-ui#21377

Closed

Shinigami92 added the has workaround label Mar 24, 2021

nihalgonsalves mentioned this issue Apr 29, 2021

Cannot build material-table / @material-ui/pickers "error: No matching export" #3205

Closed

6 tasks

nihalgonsalves closed this as completed May 11, 2021

github-actions bot locked and limited conversation to collaborators Jul 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Exported variable in chunk is not defined #1853

Exported variable in chunk is not defined #1853

hmaurer commented Feb 2, 2021 •

edited

hmaurer commented Feb 2, 2021

yyx990803 commented Feb 3, 2021

yyx990803 commented Feb 3, 2021 •

edited

hmaurer commented Feb 3, 2021

Hebilicious commented Feb 8, 2021

Xadoy commented Feb 17, 2021

ayamanemissouri commented Mar 4, 2021 •

edited

davidbonnet commented Mar 8, 2021 •

edited

abdusco commented Mar 24, 2021 •

edited

chetanchandel31 commented Mar 29, 2021

oliviertassinari commented Mar 31, 2021

M0hammedImran commented Mar 31, 2021 •

edited

fadi-george commented Mar 31, 2021

kjeske commented Apr 1, 2021

fatihdogmus commented Apr 8, 2021 •

edited

PRossetti commented Apr 30, 2021 •

edited

gubo97000 commented May 2, 2021

oliviertassinari commented May 2, 2021

akhudek commented May 2, 2021

nihalgonsalves commented May 11, 2021

Exported variable in chunk is not defined #1853

Exported variable in chunk is not defined #1853

Comments

hmaurer commented Feb 2, 2021 • edited

Describe the bug

Reproduction

System Info

hmaurer commented Feb 2, 2021

yyx990803 commented Feb 3, 2021

yyx990803 commented Feb 3, 2021 • edited

hmaurer commented Feb 3, 2021

Hebilicious commented Feb 8, 2021

Xadoy commented Feb 17, 2021

ayamanemissouri commented Mar 4, 2021 • edited

davidbonnet commented Mar 8, 2021 • edited

abdusco commented Mar 24, 2021 • edited

chetanchandel31 commented Mar 29, 2021

oliviertassinari commented Mar 31, 2021

M0hammedImran commented Mar 31, 2021 • edited

fadi-george commented Mar 31, 2021

kjeske commented Apr 1, 2021

fatihdogmus commented Apr 8, 2021 • edited

PRossetti commented Apr 30, 2021 • edited

gubo97000 commented May 2, 2021

oliviertassinari commented May 2, 2021

akhudek commented May 2, 2021

nihalgonsalves commented May 11, 2021

hmaurer commented Feb 2, 2021 •

edited

yyx990803 commented Feb 3, 2021 •

edited

ayamanemissouri commented Mar 4, 2021 •

edited

davidbonnet commented Mar 8, 2021 •

edited

abdusco commented Mar 24, 2021 •

edited

M0hammedImran commented Mar 31, 2021 •

edited

fatihdogmus commented Apr 8, 2021 •

edited

PRossetti commented Apr 30, 2021 •

edited