Missing/broken sourcemaps for JS modules w/ imports when used with Vue
Problem
Describe the bug I originally reported this to JetBrains, and they seem to think it's an issue caused by sourcemaps not being generated by Vite. The same project moved over, running, and debugging on Vue-CLI does not have this issue and breakpoints are hit in the correct file. https://youtrack.jetbrains.com/issue/WEB-55544 IntelliJ/WebStorm/VSCode seems to be unable to properly debug local JavaScript files when debugging JS modules imported into Vue components in a Vite project. If you import a regular JS module into your component which itself has an import IJ/WS/VSC is unable to properly map the local .js file to the remote file for JavaScript debugging purposes due to missing/broken sourcemaps. When you place a breakpoint in your JS module source a new, read-only copy of the remote file is loaded from http://localhost:3000/src/xxx/xxx.js in the IDE and the breakpoint stops there instead of in the original JS file. This means that you have to debug in a read-only copy and then swap to your local copy for edits, which can be a big pain. It looks like this only happens when the modules themselves have imports. You can see that the remote file has a changed "import" line and so that might be causing it to not match up. Here's a screenshot from a sample project where the import inside the module causes the mismatch. You can see this difference between the local and "remote" on line 1. I've also created an example project which replicates this issue. https://github.com/Sm
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Sourcemap Generation for JS Modules in Vite
The issue arises due to Vite not generating correct sourcemaps for JavaScript modules that have their own imports. This results in the IDE mapping breakpoints to a read-only copy of the remote file instead of the original local file. The discrepancy in the import lines between the local and remote files prevents proper mapping.
Awaiting Verification
Be the first to verify this fix
- 1
Update Vite Configuration
Modify the Vite configuration to ensure that sourcemaps are generated correctly for all JavaScript files, including those with imports. This can be done by setting the 'build.sourcemap' option to true in the Vite config file.
javascriptexport default defineConfig({ build: { sourcemap: true } }); - 2
Check Module Imports
Ensure that all JavaScript modules being imported in Vue components are using relative paths correctly. Incorrect paths can lead to sourcemap generation issues.
javascript// Example of correct import import MyModule from './MyModule.js'; - 3
Clear Cache and Rebuild
After updating the configuration, clear the Vite cache and rebuild the project to ensure that the new sourcemaps are generated. This can be done by stopping the Vite server, running 'npm run clean' (if applicable), and then 'npm run dev'.
bashnpm run clean && npm run dev - 4
Verify IDE Debugging
Open your IDE and set breakpoints in the original JavaScript files. Start debugging and confirm that the breakpoints are hit in the correct local files rather than in the read-only copies.
none// Set breakpoints in your IDE - 5
Test with Different Browsers
Test the debugging process in different browsers to ensure that the sourcemaps are functioning correctly across environments. This helps to identify if the issue is browser-specific.
none// Use Chrome, Firefox, etc. for testing
Validation
To confirm the fix, set breakpoints in your JavaScript modules and ensure that they hit the correct lines in the local files during debugging sessions. Additionally, check the network tab in the browser's developer tools to verify that sourcemaps are being loaded correctly.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep