Vue CLI 3: Sourcemaps cannot be parsed by Chrome devtools

Viewed 1789

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.

0 Answers
Related