Double reload because sourceURL is added to webpack watched files

• Operating System: macOS
• Node Version: any
• NPM Version: any
• webpack Version: 5.11.1
• source-map-loader Version: 2.0.0

Expected Behavior

Source files not added to webpack’s dependencies

Actual Behavior

Source files are added

My question

I am using react-refresh and HMR and noticed that my code reloads twice, I am using typescript seperately from webpack, and use tsc --watch in the background which compiles typescript to JS (and also generated the sourcemaps).

In another process, I have a very simple webpack config with a react refresh plugin and source-map-loader with the entry point pointing to the (typescript) compiled index.js file.

Now, I found that source-map-loader adds the source files (e.g. .tsx and .ts files) to webpack’s dependencies (and thus they are watched as well). Now, when I change a source file, webpack watch triggers, and when the typescript compiler finishes, webpack is triggered again because the compiled file is (naturally) in webpacks dependencies as well.

I wonder what can be done to improve this situation, perhaps we should add an option to this plugin to not add the source files as a dependency? I also wonder what the actual use case of adding the sourceURL as a dependency is.

Hope anyone can show me the light =)

[alexander-akait]

I think we need document it here

[davidclark87]

I hit the same issue as @vespakoen described. My app imports some JS files which have sourcemaps referencing TS files. When using source-map-loader, webpack watches the *.ts files and recompiles if I modify them. Setting watchOptions.ignored is a good workaround. But it seems odd to me that webpack is trying to watch the TS files in the first place - those TS files are not being imported anywhere in the app, so I would not expect webpack to recompile when they change. I’d expect it only to recompile if the JS file changes.