node-source-map-support
node-source-map-support copied to clipboard
doesn't handle webpack:/// urls well, is there a way to map webpack:/// to a path?
when webpack compiles sourcemaps, the urls look like this
webpack:///./foo/bar/some/file.js
is there a way to tell source-map-support, how to map webpack:/// files ?
I am having this exact problem as well, have tried a million things, no luck yet.
Hi, 15 people is a lot for this task to remain unsolved, so I decided to dig deeper.
The first thing I did was set the --enable-source-maps
flag when running the compiled js file.
the problem with webpack:///
persisted
I found a wonderful guide on the web, by sourcemap in nodejs, which dealt with most of the problems.
https://www.freecodecamp.org/news/how-to-solve-webpack-problems-the-practical-case-79fb676417f4/
In the end, I solved this for myself with the following configuration in webpack
......
mode: 'development',
devtool: 'source-map',
entry: ['./main.ts'],
target: 'node',
......
plugins: [
new NodemonPlugin({
nodeArgs: ['--inspect', '--nolazy', '--enable-source-maps'],
}),
],
output: {
path: path.resolve(__dirname, 'dist'),
devtoolModuleFilenameTemplate: (info) => {
return `file:///${encodeURI(info.absoluteResourcePath)}`;
},
filename: 'bundle.dev.js',
},
I run the backend using the nodemon plugin, and passed it the enable-source-map flag so that nodejs reads the generated webpack maps. Now stacktrace will be displayed correctly, but it will contain the webpack:///
path.
To avoid this, I changed the output part of the configuration webpack.config.js
By creating a Callback function in the parameter devtoolModuleFilenameTemplate
, and I return a string like files:///full/path/to/file
I am using nodejs 16 lts so --enable-source-map
works well, this flag appeared in node js 12
Surprisingly, now stack trace and debug (in vs code) work fine, with a path that does not contain webpack:///
Now I don't need node-source-map-support
plugin, and I can completely abandon its use, leaving only node js native source map.