hmr causes error

[pixelass]

• OS X
• node - 10.10
• npm - 6.4.1
• yarn - 1.13.0
• webpack - 4.32.2
• mini-css-extract-plugin - 0.6.0

Expected Behavior

Changes to css/less/scss should trigger hmr

Actual Behavior

An error is printed in the web console

Uncaught Error: Invalid URL                                        index.js:60 

  | ../../node_modules/mini-css-extract-plugin/node_modules/normalize-url/index.js.module.exports | @ | index.js:60
-- | -- | -- | --
  | getReloadUrl | @ | hotModuleReplacement.js:118
  | (anonymous) | @ | hotModuleReplacement.js:134
  | reloadStyle | @ | hotModuleReplacement.js:133
  | update | @ | hotModuleReplacement.js:170
  | functionCall | @ | hotModuleReplacement.js:32
  | setTimeout (async) |   |  
  | (anonymous) | @ | hotModuleReplacement.js:36
  | hotApply | @ | bootstrap:555
  | (anonymous) | @ | bootstrap:313
  | Promise.then (async) |   |  
  | hotUpdateDownloaded | @ | bootstrap:312
  | hotAddUpdateChunk | @ | bootstrap:288
  | webpackHotUpdateCallback | @ | bootstrap:7
  | (anonymous)

Code

{
	test: /\.css$/,
	use: [
		{
			loader: MiniCssExtractPlugin.loader,
			options: {
				hmr: process.env.NODE_ENV !== "production"
			}
		},
		"css-loader"
	]
},

{
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].css',
			chunkFilename: '[id].css'
		})
	]
},

import "./style.css";

How Do We Reproduce?

MVP project: https://github.com/pixelass/mini-css-extract-plugin-issue

1. open terminal and copy the following commands

git clone git@github.com:pixelass/mini-css-extract-plugin-issue.git
cd mini-css-extract-plugin-issue
yarn ## npm i
yarn dev ## npm run dev

2. open mini-css-extract-plugin-issue/src/styles.css
3. change background: blue; to background: green;
4. See error in web console

might be related to #377

[pixelass]

The error occurs due to the following html-tag in my html template:

<link rel="canonical" content="<%= host %><%= location %>"/>

e.g.

<link rel="canonical" content="https://example.com"/>

(#377)