Lots of warnings when building project with Vite 5, Material UI and sourcemaps enabled #15012
Comments
|
having the same problem with other packages too. i.e react-query |
|
Seems like it's coming from Rollup. It's likely not a bug in The original error is this: {
code: 'MODULE_LEVEL_DIRECTIVE',
id: '/Users/bjorn/Work/repros/vite-warn/node_modules/.pnpm/@mui+material@5.14.18_@emotion+react@11.11.1_@emotion+styled@11.11.0_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonBase/Ripple.js',
message: 'Module level directives cause errors when bundled, "use client" in "node_modules/.pnpm/@mui+material@5.14.18_@emotion+react@11.11.1_@emotion+styled@11.11.0_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonBase/Ripple.js" was ignored.',
pos: 0
}The A workaround for now: build: {
sourcemap: true,
rollupOptions: {
onLog(level, log, handler) {
if (log.cause && log.cause.message === `Can't resolve original location of error.`) {
return
}
handler(level, log)
}
}
}, |
bluwy
added
bug: upstream
|
@bluwy plugin-react does ignore the warning (https://github.com/vitejs/vite-plugin-react/blob/3748fc7493cf0a07a2ae275fbd1ae035f01010cc/packages/plugin-react/src/index.ts#L307-L323). |
|
The issue upstream at rollup is pretty much stale in my opinion - the last member commented on June 8th 2023..
So i wouldn't have too much hope in the issue getting fixed upstream soon.. Now with the things i pointed out let's get to the question i wanted to ask in the first place. Note: |
|
There's not much to be fixed in Vite if I understand the issue. Someone would need to debug what happens in https://github.com/rollup/rollup/blob/1df8b4924f014e0cabd4c0364370801a658cc489/src/utils/getOriginalLocation.ts#L10-L27 that's causing the error. Maybe it's a bug in that code, or Vite is generating incorrect sourcemaps that's tripping it up. |
|
Little plugin to ignore those pesky warnings Also tells you what message were not needed @martylukyy as it was a concern of yours.
|
|
@cgaube Until a package fix comes along, your plugin works brilliantly. Thanks! |
|
Rollup tries to map the position to the original position using the source map generated by esbuild (used by Vite to handle |
|
Hello, We're hit by this too since the addition of Cheers, |
|
same issue without setting sourcemap config in vite.config.ts |
|
@cgaube Nice trick, thanks a lot! With blind copy and paste I got: but adding and now it works great! The other workaround from @bluwy fails for me like this: |
|
I m getting same error when I try run yarn run build then this erro ( error node_modules/@mui/material/styles/index.js (1:0) Error when using sourcemap for reporting an error: Can't resolve original location of error. ) as well m unitest showing too much uncovered lines |
|
For now, this is what I have done to silence the warning. {
build: {
sourcemap: true,
rollupOptions: {
onwarn(warning, defaultHandler) {
if (warning.code === 'SOURCEMAP_ERROR') {
return
}
defaultHandler(warning)
},
},
}
} |
|
I'm not sure if that's the case for anybody else but I have the same errors and the resulting source maps are completely wrong (i.e. errors in the built code don't map at all to the real source code, and funnily enough all map to a file whose name is within these warnings), I believe that this warning is a sign of something happening and corrupting these source maps. Edit (false alarm): this wasn't the case! After digging further quite a lot, my source maps issues were coming from the |
Source maps do not currently work with MUI and Vite: vitejs/vite#15012 Because of this, source map utilities are currently removed.
|
same issue. We cannot use source-map-explorer for bundle analysis |
|
Hey guys, so are we doomed with this issue? As a consumer of both mui and react-query we see lots of these warnings during builds... Anything I can do to help? |
* chore(vite): use vite * fix(vite): alias lib directory * chore(vite): set type: module * chore: update vite and MUI * fix(vite): make MUI components load * fix: use node path resolution * chore(vite): add svg support * fix(vite): polyfill global * fix(vite): use import.meta * fix(vite): use correct svg module resolution * chore(vite): migrate to vitest * fix(vite): remove PUBLIC_URL * fix(tests): mock audio service * chore(deps): upgrade to react test library 14 * refactor(tests): simplify room test setup * refactor(tests): make Date.now() mockable * refactor(vite): remove bootstrap shim * chore(deps): drop react-scripts * chore(deps): remove source-map-explorer Source maps do not currently work with MUI and Vite: vitejs/vite#15012 Because of this, source map utilities are currently removed. * refactor(vite): use TypeScript for Vite config * chore(actions): update actions config for new paths * fix(service-worker): use VITE_HOMEPAGE for service worker resolution * fix(vercel): use quotes for build command * fix(vite): use import.meta.env.MODE * fix(service-worker): use correct definition for publicUrl * feat(vite): use vite-plugin-pwa * fix(pwa): make update prompt work * fix(types): use vite/client types * docs(readme): update building instructions * refactor(vite): simplify theme loading workaround * refactor(vite): use manifest object * docs(readme): update tool references * chore(deps): run `npm audit fix` * fix(vite): make syntax highlighter work consistently See: react-syntax-highlighter/react-syntax-highlighter#513 * fix(pwa): remove manifest.json references * refactor(deps): remove jest references * refactor(types): remove react-scripts reference * chore(deps): use TypeScript 5 * refactor(tests): improve persisted storage mocking
|
I was also receiving this issue when I have Running If I set What helped my build process complete was putting the I don't have a great explanation as to why this works but it seems to so hopefully it might help some others facing similar 🤷 |
|
@rowanwins |
|
For my situation (ant-design sourcemap), this issue can be bypassed using the plugin rollup-preserve-directives. The solution is taken from: pmndrs/jotai#2269 (comment) |
Describe the bug
When running
vite buildin a React project that uses Material UI components and is set up to emit sourcemaps, lots of warning messages of the typenode_modules/@mui/material/Button/Button.js (1:0) Error when using sourcemap for reporting an error: Can't resolve original location of error.are printed.This issue appeared first with Vite 5.0.0, everything worked fine in Vite 4.5.0.
(If this is an actual issue of Material UI which was now discovered by Vite 5 for the first time, please let me know so I can report it there. But since everything worked fine before upgrading to a new major version of Vite, I report it here first.)
Reproduction
https://github.com/marvinruder/vite-warn
Steps to reproduce
Open the repository in a GitHub Codespace, then run
npm installfollowed bynpm run build.System Info
System: OS: Linux 6.2 Ubuntu 20.04.6 LTS (Focal Fossa) CPU: (2) x64 AMD EPYC 7763 64-Core Processor Memory: 5.93 GB / 7.74 GB Container: Yes Shell: 5.0.17 - /bin/bash Binaries: Node: 20.9.0 - ~/nvm/current/bin/node Yarn: 1.22.19 - /usr/bin/yarn npm: 10.1.0 - ~/nvm/current/bin/npm pnpm: 8.10.2 - ~/nvm/current/bin/pnpm npmPackages: @vitejs/plugin-react: 4.2.0 => 4.2.0 vite: 5.0.0 => 5.0.0Used Package Manager
npm
Logs
Click to expand!
Validations
The text was updated successfully, but these errors were encountered: