-
-
Notifications
You must be signed in to change notification settings - Fork 6.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
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/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/ButtonBase/Ripple.js',
message: 'Module level directives cause errors when bundled, "use client" in "node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/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 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:
|
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
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) |
So the core of the issue is that Rollup is removing JavaScript directives such as Indeed the warnings went away after using this plugin https://github.com/huozhi/rollup-preserve-directives. That plugin seems to tax build time quite a bit though. I suspect you're going to have more people land on this issue as more libraries update for React Server Components. |
What's the current status here? Is it simply to disable source maps? Is a fix incoming/scheduled? |
There are quite a few errors like the following in the output of `npm run build`: Error when using sourcemap for reporting an error: Can't resolve original location of error. They all relate to the `@mui` package(-s). This seems to be related to vitejs/vite#15012. I don't fully understand it, but apparently Rollup, which is used by Vite internally somehow, doesn't preserve enough information to generate source maps properly. This patch adds a plugin to do exactly that. We should probably remove it in the long run, if the upstream issue(-s) ever get fixed. I created opencast#708 to track that. /cc opencast#685
too dirty |
Having the same issue with shadcn, it seems the error is thrown if there is "use client" directive on top of the component |
Having the same issue while using the Shadcn UI, searched the gpt for this issue it's also not able to resolve anyone knows please help? |
@alpharsh The best answer for now is to use the answer posted above by @cgaube. I've had this in place since last year, and it still works great. See comment #15012 (comment). |
See vitejs/vite#15012 (comment) for a discussion about the issue and the workaround. The issue is present when Rollup (module bundler for javascript, used by vite build) attempts to build tanstack-query and MUI dependencies with the vite config option build.sourcemap=true. Build.sourcemap needs to be true in order for code coverage to work as expected. Without the workaround, vite build is oom-killed. Another possible workaround is to increase the maximum node memory usage (e.g. export NODE_OPTIONS=--max-old-space-size=<some large number of MB>). This is undesireable because the gitlab pipeline runs in K8s containers, which likely don't have significantly more more to allocate.
* Configures Rollup manual chunks in Vite config * Ignores 'Can't resolve original location of error.' log messages during vite build See vitejs/vite#15012 (comment) for a discussion about the issue and the workaround. The issue is present when Rollup (module bundler for javascript, used by vite build) attempts to build tanstack-query and MUI dependencies with the vite config option build.sourcemap=true. Build.sourcemap needs to be true in order for code coverage to work as expected. Also see https://rollupjs.org/configuration-options/#output-manualchunks. Allows creation of custom shared common chunks. The functional form is used, which means that each resolved module id will be passed to the function and the module name is returned as a string. The module and all its dependency will be added to the manual chunk with the given name. Without the workaround, vite build is oom-killed. Another possible workaround is to increase the maximum node memory usage (e.g. export NODE_OPTIONS=--max-old-space-size=<some large number of MB>). This is undesireable because the gitlab pipeline runs in K8s containers, which likely don't have significantly more more to allocate. It's therefore recommended to set export NODE_OPTIONS=--max-old-space-size=N where N <= 2048 in development to match the memory limit of SKAO Gitlab runners.
* Configures Rollup manual chunks in Vite config * Ignores 'Can't resolve original location of error.' log messages during vite build See vitejs/vite#15012 (comment) for a discussion about the issue and the workaround. The issue is present when Rollup (module bundler for javascript, used by vite build) attempts to build tanstack-query and MUI dependencies with the vite config option build.sourcemap=true. Build.sourcemap needs to be true in order for code coverage to work as expected. Also see https://rollupjs.org/configuration-options/#output-manualchunks. Allows creation of custom shared common chunks. The functional form is used, which means that each resolved module id will be passed to the function and the module name is returned as a string. The module and all its dependency will be added to the manual chunk with the given name. Without the workaround, vite build is oom-killed. Another possible workaround is to increase the maximum node memory usage (e.g. export NODE_OPTIONS=--max-old-space-size=<some large number of MB>). This is undesireable because the gitlab pipeline runs in K8s containers, which likely don't have significantly more more to allocate. It's therefore recommended to set export NODE_OPTIONS=--max-old-space-size=N where N <= 2048 in development to match the memory limit of SKAO Gitlab runners.
* 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
* 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
Describe the bug
When running
vite build
in 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 install
followed bynpm run build
.System Info
Used Package Manager
npm
Logs
Click to expand!
Validations
The text was updated successfully, but these errors were encountered: