Source maps do not match up if using any dependencies in a symlinked library

[DaveWelling]

Environment

Running in windows with Node v16.15.1

Description

A few months ago source maps stopped working using repack and I've been banging my head against a wall trying to figure out why. The gist of the problem seems to be that any references that are consumed in a symlinked dependency module will cause the source mappings to be offset weirdly.
Put another way, this breaks the sourcemaps:

ReactNativeApp uses
   MyModule (which is symlinked into ReactNativeApp.node_modules) which uses
      Lodash (which is in a different node_modules in the root of the monorepo)

For instance when debugging the application in Chrome breakpoints will be hit in the wrong file.

In the picture, it looks like execution stopped at the correct place, but in fact, it stopped in ./node_modules/react/index.js! All the variables values displayed in the Chrome dev tools will be for ./node_modules/react/index.js context.

If I had put debugger; into my code instead of adding a Chrome dev tools breakpoint like I did in the picture, Chrome would have paused in the ./node_modules/react/index.js file instead but the variables in Chrome dev tools would have been for the /comp0.js context -- so it is sort of consistent about how much the source maps are offset by.

If I install the dependency being used by the symlinked module into the main react-native application module and create a webpack alias pointing at it, then it fixes the sourcemaps! This is not a great workaround though since I would have to install EVERY node module used by symlinked modules into the main react-native application module and create aliases pointing at them in webpack. :)

I tried to use repack v3 to see if that would fix it, but unfortunately, it did not.

Reproducible Demo

I created a repo for you using NPM v7 workspaces (which uses symlinks to allow monorepos). The idea here is that I would have both a web app and a react-native app pointing at the symlinked module so I could share code between the two apps. To keep things simple in the repo though, I only have the react-native stuff. https://github.com/DaveWelling/pocFixRnDebugging.git

In this repo, you can see that I fixed source maps which were broken by the 'styled-components' dependency (being used by symlinked module lib_ui-primitives) by installing styled-components into the DreadfulProject react-native app module and aliasing it in the webpack.config.js: 'styled-components': path.resolve('./node_modules/styled-components/native'), Then I added lodash.kebabcase as a new dependency in lib_ui-primitives and observed in Chrome dev tools that source maps were broken once again.

[DaveWelling]

Also, it seems like the problem is confined to the SourceMapDevToolPlugin because setting devtool === 'eval' (which I think uses EvalSourceMapDevToolPlugin) seems to fix the problem. You just get really ugly source files. :)

[github-actions[bot]]

This issue has been marked as stale because it has been inactive for 30 days. Please update this issue or it will be automatically closed in 14 days.

[github-actions[bot]]

This issue has been automatically closed because it has been inactive for more than 14 days. Please reopen if you want to add more context.