Add source-map-loader to support source maps of dependencies

[ericvicenti]

It seems that the source code of dependencies is not visible while debugging, but source-map-loader was designed to address this and seems to work well in dev mode.

Has this use case come up before? There could be an alternate strategy that I'm missing.

cc @skevy who pointed me in the right direction

[gaearon]

What kinds of npm packages ship with sourcemaps? I haven't seen this before.

[Timer]

I'd be interested in the speed implications of such a change with a heavy source-map laden dependency tree.

[pselden]

Potentially typescript projects.

[kiurchv]

This feature will be very helpful in case of using monorepo packages to organize several react apps and its shared components.

[jayphelps]

@gaearon

What kinds of npm packages ship with sourcemaps? I haven't seen this before.

Just ran into this, so here's an example: gilbarbara/react-joyride#280

FWIW I struggle with CRA including this loader--mostly worried too about build perf, but maybe it's unfounded? IMO projects shouldn't minify their "main". But since it's going to happen, I'm not sure what else we can do?

Looks like the loader applies two regexes to every file, only doing IO if a sourceMapURL is found. So ultimately depends on how efficient those particular regexes are. I'm too lazy to actually test, sorry... I wonder if it's possible to only apply it to dependencies and not the app's own files.

[penx]

@gaearon @kiurchv

Just to add to what has been mentioned above with a use case,

I have a monorepo with the following structure:

https://github.com/penx/pcp-form-example/tree/v0.0.1

i.e. 3 node packages:

1. web-server: web server currently using create-react-app
2. application: application/redux logic, containers
3. presentational-components: DOM, CSS etc.

I want to have the source maps of the web-server to include the original source of application/presentational-components.

The component modules (application, presentational-components) currently use ES6 modules export/import along with other syntax that needs to be transpiled. The default Webpack config in cra doesn't transpile anything in node_modules, so I guess I only have the following options:

1. transpile the React components in to a lib folder and set package.json's main to "lib/index.js" along with the source maps (this is v0.0.1 example linked above does).
2. configure the webpack config in the web-server (cra) to transpile specific named node_modules

If I go for option 1 then I need something like source-map-loader, so I guess I'd need to eject create-react-app in order to add this. I am pretty sure option 2 would require me to eject CRA too.

[Timer]

Closing as stale. Happy to take a PR like this if people express more support.

[raycohen]

I'd like to advocate for this PR to be reconsidered. Our team has multiple dependency packages we maintain for use, shared between multiple create-react-app projects. They are built with https://github.com/transitive-bullshit/react-modern-library-boilerplate and published to our private npm instance.
Currently, the sourcemaps from those dependencies are ignored, which makes debugging those components very difficult compared with anything from the create-react-app projects' src folders. Adding souce-map-loader would fix this.