Large number of Source Map Loader warnings when React starts

[p00000001]

When I start my React app, I get 28 warnings in the console from react-zoom-pan-pinch, all about the source-map-loader:

WARNING in ./node_modules/react-zoom-pan-pinch/dist/index.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '###\node_modules\react-zoom-pan-pinch\src\components\transform-component.tsx' file: Error: ENOENT: no such
 file or directory, open '###\node_modules\react-zoom-pan-pinch\src\components\transform-component.tsx'

I'm using the latest version 2.1.3. I've tried searching for a solution but cannot find anything straightforward. As far as I understand, it may be something in the react-zoom-pan-pinch distribution is trying to reference the source files, which aren't available on the npm install.

Would appreciate if anybody knows how to resolve this as I want to generate source maps in development (and whilst I don't mind if I have them or not for this module) it would be nice to clean up the large number of console warnings.

[Abe27342]

Could you share the relevant webpack rule you're using? It should be possible to adjust your configuration to exclude attempts to load source maps for this module, either by the exclude field on the build rule (probably preferred) or the filter option.

For example:

	const sourceMapRule = {
		test: /\.js$/,
		use: ['source-map-loader'],
		enforce: 'pre',
		exclude: /node_modules[\\/]react-zoom-pan-pinch[\\/]/
	};

That said, it does look like the distributed module should be adjusted to either include its source (so that source mapping URLs resolve correctly) or not publish source maps.

[p00000001]

@Abe27342 Thanks for your reply. I used the React "create-app" and the webpack config and rule is coming directly from react-scripts 5.0.0. It looks like it's configured as follows:

         // Handle node_modules packages that contain sourcemaps
        shouldUseSourceMap && {
          enforce: 'pre',
          exclude: /@babel(?:\/|\\{1,2})runtime/,
          test: /\.(js|mjs|jsx|ts|tsx|css)$/,
          loader: require.resolve('source-map-loader'),
        },

As I understand it, I'd have to eject the app or similar to edit the webpack config. I'm fairly new to this, so ideally looking for a clean (and simpler the better!) solution.

I was a bit surprised nobody else has raised it, as I'm using the default React scripts.

[Abe27342]

Ah, yes, that is fair. I don't use create-react-app myself but from reading through their docs I believe your understanding is correct that you would need to do manual config management after ejecting. (If it really bothers you, you could always copy the "src" folder into the package on disk in your node_modules folder :P)

I don't maintain this package, but I opened #266 for the simple solution of including "src" in the list of published files.

[p00000001]

Thanks @Abe27342, that's very kind of you. I really appreciate you taking the time to do that

[janaagaard75]

I have released a fork as @pronestor/react-zoom-pan-pinch that fixes this issue.

[mojsicaIcentic]

@janaagaard75 Thank you, really helpful!