Mini-css-extract-plugin: [hmr] reloadStyle will trigger errors

[hsxfjames]

• Operating System: Mac OS 10.14.4
• Node Version: v11.6.0
• NPM Version: 6.9.0
• webpack Version: 4.30.0
• mini-css-extract-plugin Version: 0.6.0

Expected Behavior

If we have a link in document which its href attribute is in data url form, reloadStyle() function shouldn't select and parse it. For example:

<link rel="shortcut icon" href="data:;base64,=">

Actual Behavior

reloadStyle() function will select this link element and try to parse its href, then throws an error from getReloadUrl() function.

Uncaught TypeError: Failed to construct 'URL': Invalid URL

Code

no need?

How Do We Reproduce?

Add the link mentioned above to any html template.

[alexander-akait]

/cc @ScriptedAlchemy I think it is easy to fix

[ScriptedAlchemy]

Looking into it now, hope to have PR ready soon. This weekend is a little busy

[ScriptedAlchemy]

@hsxfjames do you want to give this a try. https://github.com/webpack-contrib/mini-css-extract-plugin/pull/378

[alexander-akait]

Fixed https://github.com/webpack-contrib/mini-css-extract-plugin/pull/378

[hsxfjames]

Not works, because getReloadUrl() at line#148 goes before if (!isUrlRequest(url)).

Consider to judge href in raw? Or how about matching links those with rel=stylesheet only?

[hsxfjames]

Oh, am I late?😂

[alexander-akait]

rel can be omitted, what is problem?

[alexander-akait]

@hsxfjames fix doesn't work for you?

[hsxfjames]

@evilebottnawi
Not works, it still throws errors when I try to modify css. The error is from reloadStyle -> getReloadUrl -> normalizeUrl -> new URL().
I am in a limited network, so I'm also hard to paste full error message here. But you can easily try to reproduce this, just to add a simple link in base64 url form into any template you like. Let me know if you need other information~

[alexander-akait]

@hsxfjames thanks
/cc @ScriptedAlchemy

[ScriptedAlchemy]

@hsxfjames will work on this tonight, then ask you to test it again

[ScriptedAlchemy]

looks like part of this fix broke some HMR for many @evilebottnawi

https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues/170

I removed the line, so help my users - i am very bad with regex. Any ideas on what we need to do

[alexander-akait]

@ScriptedAlchemy https://github.com/webpack-contrib/mini-css-extract-plugin/pull/399#issuecomment-495333598