diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js index a4d5eeea8860b..63ca5760d5480 100644 --- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js +++ b/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; - 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')); - } + return Promise.resolve(requireText(request.url, 'utf8')); }); // Mock out portion of browser API used by parseHookNames to initialize "source-map". diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js index f2d74dc292948..3795ffe915b0f 100644 --- a/packages/react-devtools-extensions/src/parseHookNames.js +++ b/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;