Exported variable in chunk is not defined

hmaurer commented 3 years ago

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

hmaurer commented 3 years ago

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

yyx990803 commented 3 years ago

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 commented 3 years ago

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.

hmaurer commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

davidbonnet commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

In https://github.com/vitejs/vite/issues/1853#issuecomment-805605644 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 commented 3 years ago

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 commented 3 years ago

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

kjeske commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

akhudek commented 3 years ago

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 commented 3 years ago

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

vitejs / vite