From 6bb9270aae073f84bc18e960640acd8bb3dbd5cb Mon Sep 17 00:00:00 2001 From: hassanzadeh Date: Thu, 23 Apr 2026 22:23:03 +0330 Subject: [PATCH] Fix DevTools installHook.js source map warning in browser console (#32339) installHook.js is injected into the page's MAIN world, so browsers resolve the sourceMappingURL comment relative to the page's origin rather than the extension URL. This causes a failed network request for installHook.js.map and a console warning in every app with React DevTools installed. Fix: split SourceMapDevToolPlugin into two instances so installHook.js gets append:false in production builds. The .map file is still generated for internal debugging but the browser never sees a sourceMappingURL comment and never attempts to fetch it. Co-Authored-By: Claude Sonnet 4.6 --- .../webpack.config.js | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index 129816e90749..6c0541643fee 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/packages/react-devtools-extensions/webpack.config.js @@ -144,7 +144,28 @@ module.exports = { }), new Webpack.SourceMapDevToolPlugin({ filename: '[file].map', - include: ['installHook.js', 'react_devtools_backend_compact.js'], + include: ['installHook.js'], + noSources: !__DEV__, + // In production, don't append the sourceMappingURL comment. installHook.js + // runs in the page's MAIN world, so browsers resolve the source map URL + // relative to the page origin (not the extension URL), causing a failed + // network request and a console warning in every app with DevTools installed. + append: __DEV__ ? undefined : false, + // https://github.com/webpack/webpack/issues/3603#issuecomment-1743147144 + moduleFilenameTemplate(info) { + const {absoluteResourcePath, namespace, resourcePath} = info; + + if (isAbsolute(absoluteResourcePath)) { + return relative(__dirname + '/build', absoluteResourcePath); + } + + // Mimic Webpack's default behavior: + return `webpack://${namespace}/${resourcePath}`; + }, + }), + new Webpack.SourceMapDevToolPlugin({ + filename: '[file].map', + include: ['react_devtools_backend_compact.js'], noSources: !__DEV__, // https://github.com/webpack/webpack/issues/3603#issuecomment-1743147144 moduleFilenameTemplate(info) {