-
-
Notifications
You must be signed in to change notification settings - Fork 6.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Exported variable in chunk is not defined #1853
Comments
PS: I am not exactly sure why but I couldn't get a reproduction without also importing the package |
import Delete from "@material-ui/icons/Delete" This import is importing a CJS file which transitively If you have control over this, use |
This looks like a legit bug in |
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? |
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.
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'
} |
@Hebilicious I have similar issue, and in my code 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:
while after I moved |
I try it but i doesn't work |
The following 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' |
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
},
}); |
I'm facing a similar issue, This is the error i get in console: |
In #1853 (comment) would replacing |
This worker for me. 🎉 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',
],
},
}); |
For me at least, I didn't need any alias changes or messing with optimizeDeps |
It seems like it's fixed in esbuild v0.11+ |
I'm having same problem. None of the solutions above worked for me. The code works perfectly fine when I run I get the following error: import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles"; The problem is solved by importing it as 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. |
I was able to make it work by doing a pristine install like this:
My
My
Please let me know if it helps anybody! |
My packages:
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',
},
],
},
}) |
Would someone be interested in added an official Material-UI + Vite example in the MUI repo? mui/material-ui#21377 |
Confirmed that updating esbuild fixes this. In addition to vite 2.2.3 I added esbuild 0.11.17 and then (using yarn) added
which forces vite to use the newer package. |
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: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
Open the Vite dev server and observe the following error in the browser console:
Now, stop the dev server. Edit
main.js
like so: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 formakeStyles_default
and an exportmakeStyles_default as makeStyles
, whereas the@material-ui_core.buggy.js
file contains an exportmakeStyles: () => makeStyles_default
but no import or definition formakeStyles_default
!System Info
vite
version: 2.0.0-beta.62The text was updated successfully, but these errors were encountered: