I built my simple site using Vue UI (the ones that comes with Vue-CLI 3), and it created sourcemaps in the /dist folder. I deploy these sourcemaps along with the production files. When I load up my site, Chrome indicates it cannot parse the sourcemaps in Devtools.
DevTools failed to parse SourceMap: https://www.thisisnotarealdomain.net/js/app.92ef018b.js.map
I have tried the following in vue.config.js:
module.exports = {
css: {
// modules: true,
loaderOptions: {
// pass options to sass-loader
sass: {
// @/ is an alias to src/
// so this assumes you have a file named `src/scss/variables.scss`
data: `@import "@/scss/_globals.scss";`
}
}
},
configureWebpack: {
devtool: '#source-map'
}
}
and
module.exports = {
css: {
// modules: true,
loaderOptions: {
// pass options to sass-loader
sass: {
// @/ is an alias to src/
// so this assumes you have a file named `src/scss/variables.scss`
data: `@import "@/scss/_globals.scss";`
}
}
},
configureWebpack: {
devtool: '#cheap-eval-source-map'
}
}
But Chrome still complains and I cannot see my original source.
I found some articles on the Internet regarding Webpack and Chrome interaction with sourcemaps, but I cannot tell if the problem has been resolved. Is there a problem with sourcemaps created by Vue UI?
Thanks.
It seems that you are having issues with source maps not being correctly parsed by Chrome DevTools. There are a few things that could be causing this issue:
The source map file is not being correctly generated: Make sure that the source map file is correctly generated and is present in the /dist folder. You can check the devtool option in your webpack configuration to ensure that source maps are being generated.
The source map file is not being correctly served: Make sure that the source map file is being served correctly. This could be due to incorrect file permissions, incorrect file path, or other server-side issues.
The source map file is invalid: Make sure that the source map file is valid. You can use a tool like https://sourcemap.app/ to validate your source map file.
There is a problem with the way Chrome handles source maps: There have been issues with Chrome not handling source maps correctly in the past. Make sure you are using the latest version of Chrome and check for any known issues related to source maps.