From d7bb6039de6d8fa7c89b00626418c110872cc2e7 Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <rdlesyutin@gmail.com>
Date: Mon, 17 Jun 2024 11:58:19 +0100
Subject: [PATCH] chore[react-devtools/extensions]: make source maps url
 relative (#29886)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This adds few changes:
1. We are going to ship source maps only for 2 artifacts:
`installHook.js` and `react_devtools_backend_compact.js`, because it is
only these modules that can patch console and be visible to the user via
stack traces in console. We need to ship source maps to be able to use
`ignoreList` feature in source maps, so we can actually hide these from
stack traces.

| Before | After |
|--------|--------|
| ![Screenshot 2024-06-13 at 17 44
25](https://github.com/facebook/react/assets/28902667/464e097b-a95e-47eb-967c-0579daad316b)
| ![Screenshot 2024-06-13 at 17 39
53](https://github.com/facebook/react/assets/28902667/e4afe642-d65b-4296-a2cf-26c0b925ebf2)
|

2. The `"sources"` field in source map will have relative urls listed,
instead of absolute with `webpack://` protocol. This will move the
sources to the `React Developer Tools` frame in `Sources` panel, instead
of `webpack://`.

 | Before | After |
|--------|--------|
| ![Screenshot 2024-06-13 at 17 48
24](https://github.com/facebook/react/assets/28902667/a18edad2-5b4e-4ad7-8a7a-8b389c2edf92)
| ![Screenshot 2024-06-13 at 17 49
41](https://github.com/facebook/react/assets/28902667/5db491f7-5d1d-4155-9910-16ac4384d34e)
|

> [!NOTE]
> I still have 1 unresolved issue with shipping source maps in extension
build, and it is related to Firefox, which can't find them in the
extension bundle and returns 404, even though urls are relative and I
can actually open them via unique address like
`moz-extension://<extension-id>/build/intallHook.js.map` ¯\\\_(ツ)\_/¯
---
 .../react-devtools-extensions/webpack.backend.js   | 13 ++++++++++++-
 .../react-devtools-extensions/webpack.config.js    | 14 +++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
index 33b30247c7804..b3898c6b3502d 100644
--- a/packages/react-devtools-extensions/webpack.backend.js
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const {resolve} = require('path');
+const {resolve, isAbsolute, relative} = require('path');
 const Webpack = require('webpack');
 
 const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
@@ -93,6 +93,17 @@ module.exports = {
     new Webpack.SourceMapDevToolPlugin({
       filename: '[file].map',
       noSources: !__DEV__,
+      // 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 SourceMapIgnoreListPlugin({
       shouldIgnoreSource: () => !__DEV__,
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 4195a43abfe58..f9424f671960f 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const {resolve} = require('path');
+const {resolve, isAbsolute, relative} = require('path');
 const Webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 const {
@@ -137,7 +137,19 @@ module.exports = {
     }),
     new Webpack.SourceMapDevToolPlugin({
       filename: '[file].map',
+      include: 'installHook.js',
       noSources: !__DEV__,
+      // 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 SourceMapIgnoreListPlugin({
       shouldIgnoreSource: (assetName, _source) => {