Closed Bug 1539066 Opened 5 years ago Closed 4 years ago

Source Map of Webpack DLL makes Firefox cause TypeError: Invalid URL


(DevTools :: Inspector, defect, P3)



(Not tracked)



(Reporter: jinliming2, Unassigned)


(Blocks 1 open bug)


User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3744.0 Safari/537.36

Steps to reproduce:

  1. Create an empty NPM project:
    npm init -y
    npm install -S react react-dom webpack webpack-cli
  2. Create a Webpack configuration file webpack.dll.js:
    const webpack = require('webpack');
    module.exports = {
      entry: {
        react: [ 'react', 'react-dom'],
      mode: 'development',
      devtool: 'source-map',
      context: __dirname,
      plugins: [
        new webpack.DllPlugin({
           name: '[name]',
           path: '[name].dll.json',
      output: {
        library: '[name]',
        filename: '[name].dll.js',
        path: __dirname,
  3. Build dll:
    ./node_modules/.bin/webpack --config ./webpack.dll.js
  4. Create a HTML file index.html:
    <!DOCTYPE html>
        <meta charset="UTF-8" />
        <script src="./react.dll.js"></script>
  5. Just open this html file in Firefox, and open DevTool.

Actual results:

Warning comes in DevTool: Source map error: TypeError: Invalid URL: webpack://[name]/webpack/bootstrap

Expected results:

No warnings in DevTool and load Webpack source map correctly.

Has STR: --- → yes
Component: Untriaged → General
Product: Firefox → DevTools

The priority flag is not set for this bug.
:pbro, could you have a look please?

Flags: needinfo?(pbrosset)

I am experiencing a similar issue (Nightly 68.0a1) when using rails 6 with webpacker.
Webpack generates base64 URL for source map, which is valid (i can open URL manually), and works fine in chromium.
Only for scss maps - js is ok.

Error message:

Source map error: TypeError: Invalid URL: .
Resource URL: blob:http://localhost:3000/80cba682-0351-44a7-bb1b-2d21d769fe34
Source Map URL: data:application/json;base64,eyJ2ZXJzaW ........

Have tried with fresh firefox setup, same result.

Moving this to the debugger component as I think the triage owners there will be much better equipped than I to triage this bug and act on it.
Thanks for filing.

Component: General → Debugger
Flags: needinfo?(pbrosset)
Blocks: dbg-sources
Priority: -- → P3

I have managed to reproduce my error without using webpack, here is the code:

<!DOCTYPE html>
    <meta charset="utf-8">
    Hello there
  <script type="text/javascript">
   var style = `body {
  background-color: #A0A0A0; }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0ZGluIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsMEJBQTBCLEVBQUUiLCJmaWxlIjoic3RkaW4iLCJzb3VyY2VzQ29udGVudCI6WyJib2R5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogI0EwQTBBMDsgfVxuIl19 */`,
       blob = new Blob([style], {type: "text/css"});
   let objectURL = URL.createObjectURL(blob);
   let link = document.createElement("link");
   link.setAttribute("rel", "stylesheet");
   link.setAttribute("href", objectURL);

So it turns out that firefox has some troubles when style is passes as blob url. This example works fine when style is loaded like <link rel="stylesheet" href="style.css"> or inline.

Should i open another bug for this?

neat. I'll send this to the inspector folks who can investigate.

Component: Debugger → Inspector

I don't know if it's the same bug as I don't use DLL but I've also some troubles with sourcemaps done via webpack with firefox (no troubles with canary):

Source map error: TypeError: Invalid URL: .
Resource URL: blob:
Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveC1tb2RlbC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7QUFDRjtFQUNFLHNCQUFzQjtBQUN4Qjs7QUFFQTs7O0VBR0UsbUJBQW1CO0FBQ3JCIiwiZmlsZSI6ImJveC1tb2RlbC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIG1vcmUgaW5mbyB0aGVyZTogaHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4vZG9jcy9XZWIvQ1NTL2JveC1zaXppbmdcbiAqL1xuaHRtbCB7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG59XG5cbiosXG4qOmJlZm9yZSxcbio6YWZ0ZXIge1xuICBib3gtc2l6aW5nOiBpbmhlcml0O1xufVxuIl19

Alright, revisiting this because we've done a bunch of work on sourcemap work recently. This is not a Firefox issue.

The sourcemap output here is:

  "sources": [

the issue is that these are invalid URLs. webpack: is the URL protocol, and [name] is expected to be a host, just like if you were doing The issue is that [name] is not a valid host, and so parsing the URL fails.

I don't know what part of Webpack needs to change, or whether the Webpack config here is wrong to be using [name] as a substitution or what, but it appears to be either misconfiguration, or a Webpack bug failing to apply the configuration properly.

@Erwann Your issue is separate and I think should be fixed in stable or beta FF now.

Closed: 4 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.