-
-
Notifications
You must be signed in to change notification settings - Fork 32.1k
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
[examples] Add example demo with vite #21377
Comments
Note that vite is still experimental https://github.com/vitejs/vite#status. It should already be supported. One thing that we could do is create an example with it. Why not, once it's stable. |
yeah..Has been supported, but there are problems.. |
Could you expand on the issues you are facing? |
import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup'; This will cause an error. |
Definitely not a Material-UI issue in that case. |
@vvni Do you have a reproduction? I believe the correct imports with vite are import { Button, ButtonGroup } from '@material-ui/core'; |
This comment has been minimized.
This comment has been minimized.
When using vite.js i am getting a |
me too , When using vite.js i am getting a Uncaught ReferenceError: Box_default is not defined |
Out of curiosity, us vite used by developers migrating from Vue to React, or it's unrelated? |
@oliviertassinari you can take a look this comment. if you guys just compile component to ES module that should be great. |
doesn't work for me this comment |
I can compile with icons v5.0.0-alpha.20 but cant with 5.0.0-alpha.26 |
The issue is unrelated to Material-UI, root cause: evanw/esbuild#706 |
Looking at vitejs/vite#1853 (comment), it seems to be a combination of multiple factors. It's both esbuild that doesn't interop well between CJS/ESM and the encouraged imports for icons that are CJS. I wonder if the icons package shouldn't only export an ESM version. @eps1lon I recall you mentioned that we could potentially drop CJS, do you have more details on the changes involved? |
Regarding adding an example with Vite, we might not be yet at a point where we should care enough https://npm-stat.com/charts.html?package=vite&package=react-scripts&from=2020-03-06&to=2021-03-06 |
IMHO, there's no need to add a |
A great sign that the developer community is tired of waiting for webpack to build? :) |
Yes, and we also know how to pronounce its name with the right accent, for a change. What's more to ask? 😉 |
I have the same issue as @fadi-george on 5.0.0-alpha.27 I have this error using vite latest build 2.0.5:
But it doesn't works with alpha.20 sadly. |
@nestarz Hmm, Id try updating imports to be like this:
|
After a clean install of packages, I can build for Vite 2.1.0 using the kern.maxfiles trick for alpha.27 as well (no aliases). |
@oliviertassinari I tried many different solutions in my quite big application using material-ui (btw it's crazy awesome lib, thanks!) and the only config that worked for me is provided here: vitejs/vite#1853 (comment) |
@oliviertassinari had the same error, what worked was inspired from your solution: alias: {
'@material-ui/icons': '@material-ui/icons/esm',
},
Been struggling with alias resolution, for some reason regex doesn't seem to work for me, and relative paths in "replacement" messes up with the final path. |
I was able to make it work by doing a pristine install like this:
My 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
Please let me know if it helps anybody! |
thx, resolve path issue is so confused... |
No, vite version is different, there are different problems. |
This is still broken for me, and the proposed solution doesn't make much sense with v5 since icons are now in @mui/icons-material (I tried that path but I don't actually think this has anything to do with the icons). My error is |
I have the same issue as above with mui packages... |
For those struggling with this issue, it still exists for import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh()],
resolve: {
alias: [
{
find: /^@mui\/icons-material\/(.*)/,
replacement: "@mui/icons-material/esm/$1"
}
]
}
}); |
For me this was fixed with 5.0.4 and lab 5.0.0-alpha.51 :) |
Still happening as of vite 2.9.13 @heyheman11 Thank you. Your workaround saved my day. |
Same here... Versions:
I was having the following error: Below fix did it for me, thanks @heyheman11
|
This solved my problem. Thanks. |
I am still getting this error while moving existing big codebase from react cra to vite.
|
thanks it works for me |
Hope to support vite...
Related issues:
Exported variable in chunk is not defined
: Exported variable in chunk is not defined vitejs/vite#1853ESM entry module's exports signature is not preserved
: ESM entry module's exports signature is not preserved whenrequired()
by other modules evanw/esbuild#706The text was updated successfully, but these errors were encountered: