Resolve source map URL/path relative to the script

packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js

@@ -41,24 +41,11 @@ describe('parseHookNames', () => {
     // has a recursion breaker which falls back to the default behavior.
     Error.prepareStackTrace = (error, trace) => {
       return error.stack;
-    }
+    };
 
     fetchMock.mockIf(/.+$/, request => {
       const {resolve} = require('path');
-      const url = request.url;
+      return Promise.resolve(requireText(request.url, 'utf8'));
-      if (url.endsWith('js.map')) {
-        // Source maps are relative URLs (e.g. "path/to/Exmaple.js" specifies "Exmaple.js.map").
-        const sourceMapURL = resolve(
-          __dirname,
-          '__source__',
-          '__compiled__',
-          'external',
-          url,
-        );
-        return Promise.resolve(requireText(sourceMapURL, 'utf8'));
-      } else {
-        return Promise.resolve(requireText(url, 'utf8'));
-      }
     });
 
     // Mock out portion of browser API used by parseHookNames to initialize "source-map".

packages/react-devtools-extensions/src/parseHookNames.js

@@ -189,6 +189,7 @@ function extractAndLoadSourceMaps(
       }
     } else {
       for (let i = 0; i < sourceMappingURLs.length; i++) {
+        const fileName = ((hookSourceData.hookSource.fileName: any): string);
         const sourceMappingURL = sourceMappingURLs[i];
         const index = sourceMappingURL.indexOf('base64,');
         if (index >= 0) {
@@ -211,7 +212,6 @@ function extractAndLoadSourceMaps(
 
           // Hook source might be a URL like "https://4syus.csb.app/src/App.js"
           // Parsed source map might be a partial path like "src/App.js"
-          const fileName = ((hookSourceData.hookSource.fileName: any): string);
           const match = parsed.sources.find(
             source =>
               source === 'Inline Babel script' || fileName.includes(source),
@@ -235,6 +235,13 @@ function extractAndLoadSourceMaps(
             if (!isValidUrl(url)) {
               throw new Error(`Invalid source map URL "${url}"`);
             }
+          } else if (!url.startsWith('/')) {
+            // Resolve paths relative to the location of the file name
+            const lastSlashIdx = fileName.lastIndexOf('/');
+            if (lastSlashIdx !== -1) {
+              const baseURL = fileName.slice(0, fileName.lastIndexOf('/'));
+              url = `${baseURL}/${url}`;
+            }
           }
 
           hookSourceData.sourceMapURL = url;