Source maps not loaded/detected from NPM package imported into create-react-app

Question

I'm using create-react-app to develop re-usable React components that can be imported individually into other projects (these projects will typically also be create-react-app projects as well). I'm using Gulp to generate the files to be consumed using a combination of gulp-sourcemaps and gulp-babel, i.e.

gulp.task("build:lib", function () {
let js = gulp.src([ "./src/**/*.js", "!./src/index.js"])
             .pipe(sourcemaps.init())
             .pipe(babel({presets:["react-app"]}))
             .pipe(sourcemaps.write("."}))
             .pipe(gulp.dest("lib"));

I can see that the .js.map files are being successfully created and that the output files have a comment in them indicating the existence of a source map, such as:

//# sourceMappingURL=Create.js.map

The issue I then have is that when the files are imported in a consuming project I am neither seeing the original source shown in browser developer tools, however when hovering over a file (in the sources tab in Chrome, within the "webpack://" tree) I see the tooltip:

Create.js (from source map)

Therefore I can't tell whether or not I'm actually generating the source maps incorrectly or whether it's just that the webpack-dev-server configuration used by create-react-app is not serving the .js.map files (I certainly don't see them in the webpack:// tree under the sources tab in Chrome but I'm not sure whether I would expect to or not).

Any advice on whether my gulp script is wrong or on what create-react-app / webpack-dev-server should support would be much appreciated.

I've had a read through of the documentation for gulp-sourcemaps and tried many of the options but with no success.

score 0 · Answer 1 · answered Mar 27 '17 at 13:32

I've actually found a solution to this problem myself. I converted my Gulp task to build the source maps inline (which shouldn't be a problem for the consuming application because as it is embedded as a comment it will be stripped out of the distribution file at build time).

The other thing I needed to do was to convert the devtools configuration in create-react-app from cheap-module-source-map to eval (unfortunately this requires ejecting). However it does at least solve the problem.

Source maps not loaded/detected from NPM package imported into create-react-app

1 Answers1