SourceMap loader complains "Missing source files" in the new v8 build

[okhomenko]

WARNING in ./node_modules/react-resize-detector/build/index.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/src/main/webpack/node_modules/react-resize-detector/src/ResizeDetector.tsx' file: Error: ENOENT: no such file or directory, open '/src/main/webpack/node_modules/react-resize-detector/src/ResizeDetector.tsx'
Error: Failed to parse source map from '/src/main/webpack/node_modules/react-resize-detector/src/ResizeDetector.tsx' file: Error: ENOENT: no such file or directory, open '/src/main/webpack/node_modules/react-resize-detector/src/ResizeDetector.tsx'
    at fetchFromFilesystem (/src/main/webpack/node_modules/source-map-loader/dist/utils.js:140:11)
    at async fetchFromURL (/src/main/webpack/node_modules/source-map-loader/dist/utils.js:254:9)
    at async /src/main/webpack/node_modules/source-map-loader/dist/index.js:105:11

[snelsi]

Please, provide some more info about your project's setup:

• Do you use custom Webpack / source-map-loader config?
• Do you see this error when installing node modules? Or during dev / build commands?

I tried to google the error message and it seems like it's just a false-positive warning by the latest CRA 5 / Webpack 5 release:
mebjas/html5-qrcode#396 (comment)
colinhacks/zod#828 (comment)

You can hide it temporarly by setting GENERATE_SOURCEMAP variable to false in your app.

Based on links below, adding src to the files field in the package.json might fix the warning on our side as well:
mswjs/interceptors#204
mswjs/msw#1030 (comment)
colinhacks/zod#864

Or we can just remove .map files from the build.

[snelsi]

@maslianok I'm more leaning toward removing .map files from the build, based on this discussion. What do you think?

[okhomenko]

Thanks @snelsi. For the time being I have disabled source maps for the package in my webpack config:

...
  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        use: ['source-map-loader'],
        enforce: 'pre',
        exclude: [path.resolve(__dirname, './node_modules/react-resize-detector')],
      },

...

In the source maps for esm build you reference ts-files but the files are excluded from the build

[maslianok]

We haven't published library sources to npm before. Does it mean that the library's source maps didn't work at all? 😮

Well, looks like it's a good idea to remove files that are useless 😄

[maslianok]

Removed in v8.0.1
PR #229

[okhomenko]

Thanks @maslianok for a quick fix. Source maps are vey useful when I need to troubleshoot an issue.

They worked in v7. For each of the src/* files you had a section in sourcesContent.

[snelsi]

@okhomenko You are right, sourcesContent is null is the new version for some reason.

Looks like to fix this is just a matter of adding inlineSources: true to the tsconfig:
rollup/plugins#260

[maslianok]

Do we increase production build size by adding sourcemaps/sources to the module?

[maslianok]

I did some testing and it seems my understanding of sourcemaps was correct.
Sourcemaps are included ONLY in development builds. When you run "yarn build" in CRA it creates an optimized prod build without sourcemaps.

Firs run: current v8.0.1 build without sourcemaps
Second run: with sourcemap: true & inlineSources: true

I suppose other modern libraries also follow this rule.

Can you confirm or deny this?

[snelsi]

Can confirm that the only difference between the build with inlineSources: false and inlineSources: true are sourcesContent field inside .map files.

Either to include or exclude the source map files from the build decides the user, really.
By default they are excluded in the majority of the prod builds.

Looks good to me to merge in the master 👍:
#230

[maslianok]

Merged and published v8.0.2.

Thank you, @snelsi

@okhomenko please confirm that it works as you expected

[okhomenko]

Thanks @snelsi and @maslianok! It works as expected 🎉