Source map warning on Next 15.0.3 with turbopack, Windows, Firefox #73384

altbdoor · 2024-11-30T14:26:51Z

Link to the code that reproduces this issue

https://github.com/altbdoor/nextjs-sourcemap-warning-firefox-reproduction

To Reproduce

Create a base reproduction template with npx create-next-app -e reproduction-template
Name the project as test-ground
cd test-ground
npm run dev -- --turbo
Open http://localhost:3000 in Windows Firefox 133.0 (64-bit)
Get warning on source map error

Current vs. Expected behavior

Source map error: Error: Invalid URL: file://C%3A/Users/carbon/projects/test-ground/node_modules/next/src/client/app-bootstrap.ts
Stack in the worker:URLImpl@resource://devtools/client/shared/vendor/whatwg-url.js:22:13
setup@resource://devtools/client/shared/vendor/whatwg-url.js:537:14
URL@resource://devtools/client/shared/vendor/whatwg-url.js:246:18
createSafeHandler/<@resource://devtools/client/shared/vendor/source-map/lib/util.js:181:17
computeSourceURL@resource://devtools/client/shared/vendor/source-map/lib/util.js:437:22
BasicSourceMapConsumer/</that._absoluteSources<@resource://devtools/client/shared/vendor/source-map/lib/source-map-consumer.js:213:23
BasicSourceMapConsumer/<@resource://devtools/client/shared/vendor/source-map/lib/source-map-consumer.js:212:33

Resource URL: http://localhost:3000/_next/static/chunks/node_modules_next_dist_client_239c40._.js
Source Map URL: node_modules_next_dist_client_239c40._.js.map

Show warning image

Should not have the warning, I suppose?

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 16206
  Available CPU cores: 12
Binaries:
  Node: 22.11.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.4-canary.32 // Latest available version is detected (15.0.4-canary.32).
  eslint-config-next: N/A
  react: 19.0.0-rc-b01722d5-20241114
  react-dom: 19.0.0-rc-b01722d5-20241114
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

This warning did not appear for:

Windows Edge 131.0.2903.70 (Official build) (64-bit), all npm run commands
Windows Firefox 133.0 (64-bit), npm run dev without turbopack
Windows Firefox 133.0 (64-bit), npm run start after build

Edit: tried it on Windows Firefox private mode with all extensions disabled, and I still see the warning.

The text was updated successfully, but these errors were encountered:

mk48 · 2024-12-05T13:05:25Z

I am also having the same issue

thany · 2024-12-12T16:03:07Z

I have this problem in 15.0.3 as well as on 15.1.0.

If I remove the --turbopack switch from next dev, it fails with a hydration error, complaining that there's a mismatch of the classname on the <html> element. Great, there is no classname on there, so I wonder what is it mismatching? Maybe this is something only I have, but how weird is it that having turbopack or not, makes this difference?

Edit: nope, that's just MUI throwing wrenches in the work again.
Edit 2: no it bloody isn't. It just happens randomly!

Still, without --turbopack it's throwing warnings that are not useful enough for me to really track down:

Source map error: request failed with status 404
Resource URL: http://localhost:2000/%3Canonymous%20code%3E
Source Map URL: installHook.js.map

And

Source map error: map is undefined
Resource URL: http://localhost:2000/%3Canonymous%20code%3E
Source Map URL: react_devtools_backend_compact.js.map

So we have a choice.

Random hydration errors that don't make sense*
Random warnings that don't make sense*

*) To me anyway

pburrows · 2024-12-19T11:11:24Z

Note that this only seems to happen in Firefox. The source maps load fine in Chrome and do not throw an error. When using Firefox, however (my default dev browser), it is over 100 requests per page load, all throwing 404 errors in the console, plus a warning for each of those errors, resulting in hundreds of lines of useless text in the console window that we have to wade through.

carlaraya · 2025-01-08T14:45:26Z

I also discovered that this particular bug seems to only happen in Firefox Windows, as @pburrows said.

The colon in "file://C:/file/path/sourcemap.js" gets encoded to %3A which Firefox cannot parse but Chromium can.

I couldn't find a way to fix this myself in Next.js, Turbopack or Firefox (EDIT: Made a fix, see below comment)

carlaraya · 2025-01-11T06:49:10Z

Quick and dirty fix:

Add this code in .\node_modules\next\dist\build\output\store.js right after the line _log.event(``Compiled${trigger ? ' ' + trigger : ''}${timeMessage}${modulesMessage}``);. Right after Next.js finishes compiling the project, this code directly edits the .js.map files being served by the Next.js server and replaces "//C%3A/" with "//C:/". Read the code carefully and make any necessary edits before running it.

(function (rootDir, extension, toReplace, replaceWith) {
    const fs = require("fs");
    const path = require("path");
    let fileCount = 0;
    let changesCount = 0;
    function fixSourceMaps(dir) {
        const files = fs.readdirSync(dir, { withFileTypes: true });
        for (const file of files) {
            const fullPath = path.join(dir, file.name);
            if (file.isDirectory()) {
                fixSourceMaps(fullPath);
            } else if (file.isFile() && file.name.endsWith(extension)) {
                fileCount++;
                const fileContent = fs.readFileSync(fullPath, 'utf8');
                const splitContent = fileContent.split(toReplace);
                changesCount += splitContent.length - 1;
                const updatedContent = splitContent.join(replaceWith);
                fs.writeFileSync(fullPath, updatedContent, "utf8");
            }
        }
    }
    fixSourceMaps(rootDir);
    _log.event(`Fixed ${changesCount} instances of ${toReplace} with ${replaceWith} in ${fileCount} files.`);
})(".next/", ".js.map", "//C%3A/", "//C:/");

Add the same code to .\node_modules\next\dist\server\dev\hot-reloader-turbopack.js, right after the line _log.event(``Compiled in ${timeMessage}``);, in order to do the replacement right after a live reload.

Console output

These lines will need to be reinserted for every update of Next.js, when the edited js files are overwritten by npm.

Anyways this is obviously a dirty fix only meant to make source maps usable right now on Windows Firefox. Still waiting for a proper fix by Turbopack devs 🙏

HasanMothaffar · 2025-01-13T06:36:39Z

Same issue here on Firefox 134.0 (64-bit), Next.js 15.1.4, Turbopack

altbdoor added the bug Issue was opened via the bug report template. label Nov 30, 2024

github-actions bot added the Turbopack Related to Turbopack with Next.js. label Nov 30, 2024

github-actions bot added the linear: turbopack Confirmed issue that is tracked by the Turbopack team. label Dec 30, 2024

This comment has been minimized.

Sign in to view

samcx removed the bug Issue was opened via the bug report template. label Jan 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Source map warning on Next 15.0.3 with turbopack, Windows, Firefox #73384

Source map warning on Next 15.0.3 with turbopack, Windows, Firefox #73384

altbdoor commented Nov 30, 2024 •

edited

Loading

mk48 commented Dec 5, 2024

thany commented Dec 12, 2024 •

edited

Loading

pburrows commented Dec 19, 2024

This comment has been minimized.

carlaraya commented Jan 8, 2025 •

edited

Loading

carlaraya commented Jan 11, 2025 •

edited

Loading

HasanMothaffar commented Jan 13, 2025 •

edited

Loading

Source map warning on Next 15.0.3 with turbopack, Windows, Firefox #73384

Source map warning on Next 15.0.3 with turbopack, Windows, Firefox #73384

Comments

altbdoor commented Nov 30, 2024 • edited Loading

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

mk48 commented Dec 5, 2024

thany commented Dec 12, 2024 • edited Loading

pburrows commented Dec 19, 2024

This comment has been minimized.

carlaraya commented Jan 8, 2025 • edited Loading

carlaraya commented Jan 11, 2025 • edited Loading

HasanMothaffar commented Jan 13, 2025 • edited Loading

altbdoor commented Nov 30, 2024 •

edited

Loading

thany commented Dec 12, 2024 •

edited

Loading

carlaraya commented Jan 8, 2025 •

edited

Loading

carlaraya commented Jan 11, 2025 •

edited

Loading

HasanMothaffar commented Jan 13, 2025 •

edited

Loading