node-source-map-support icon indicating copy to clipboard operation
node-source-map-support copied to clipboard

doesn't handle webpack:/// urls well, is there a way to map webpack:/// to a path?

Open nojvek opened this issue 4 years ago • 2 comments

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 ?

nojvek avatar May 16 '20 04:05 nojvek

I am having this exact problem as well, have tried a million things, no luck yet.

braddialpad avatar Aug 03 '21 23:08 braddialpad

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.

WeslyG avatar Nov 08 '21 20:11 WeslyG