Source Map of Webpack DLL makes Firefox cause TypeError: Invalid URL
Categories
(DevTools :: Inspector, defect, P3)
Tracking
(Not tracked)
People
(Reporter: jinliming2, Unassigned)
References
(Blocks 1 open bug)
Details
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:
- Create an empty NPM project:
npm init -y npm install -S react react-dom webpack webpack-cli - 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, } }; - Build dll:
./node_modules/.bin/webpack --config ./webpack.dll.js - Create a HTML file
index.html:<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <script src="./react.dll.js"></script> </body> </html> - 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.
|
||
Updated•5 years ago
|
|
||
Updated•5 years ago
|
|
|
||
Comment 1•5 years ago
|
||
The priority flag is not set for this bug.
:pbro, could you have a look please?
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.
|
||
Comment 3•5 years ago
|
||
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.
|
||
Updated•5 years ago
|
I have managed to reproduce my error without using webpack, here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Hello there
</body>
<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);
console.log(objectURL);
let link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", objectURL);
document.head.appendChild(link);
</script>
</html>
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?
|
|
||
Comment 5•5 years ago
|
||
neat. I'll send this to the inspector folks who can investigate.
|
|
||
Updated•5 years ago
|
|
||
Comment 6•5 years ago
|
||
When looking into this, we should also verify these cases that Harald raised:
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:http://mysite.com/dfd59101-7b5e-3943-9cd0-007533bb1de2
Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveC1tb2RlbC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7QUFDRjtFQUNFLHNCQUFzQjtBQUN4Qjs7QUFFQTs7O0VBR0UsbUJBQW1CO0FBQ3JCIiwiZmlsZSI6ImJveC1tb2RlbC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIG1vcmUgaW5mbyB0aGVyZTogaHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4vZG9jcy9XZWIvQ1NTL2JveC1zaXppbmdcbiAqL1xuaHRtbCB7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG59XG5cbiosXG4qOmJlZm9yZSxcbio6YWZ0ZXIge1xuICBib3gtc2l6aW5nOiBpbmhlcml0O1xufVxuIl19
|
|
||
Comment 8•4 years ago
|
||
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": [
"webpack://[name]/webpack/bootstrap",
"webpack://[name]/./node_modules/object-assign/index.js",
"webpack://[name]/./node_modules/prop-types/checkPropTypes.js",
"webpack://[name]/./node_modules/prop-types/lib/ReactPropTypesSecret.js",
"webpack://[name]/./node_modules/react-dom/cjs/react-dom.development.js",
"webpack://[name]/./node_modules/react-dom/index.js",
"webpack://[name]/./node_modules/react/cjs/react.development.js",
"webpack://[name]/./node_modules/react/index.js",
"webpack://[name]/./node_modules/scheduler/cjs/scheduler-tracing.development.js",
"webpack://[name]/./node_modules/scheduler/cjs/scheduler.development.js",
"webpack://[name]/./node_modules/scheduler/index.js",
"webpack://[name]/./node_modules/scheduler/tracing.js"
],
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 http://example.com/./node_modules/scheduler/tracing.js. 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.
Description
•