Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
Rulexec committed May 26, 2020
0 parents commit c09e3ed
Show file tree
Hide file tree
Showing 9 changed files with 5,346 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
23 changes: 23 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
Demo of https://github.com/webpack-contrib/mini-css-extract-plugin/pull/531

* `npm ci`
* `npm run start`
* Go to `http://localhost:8080/`
* Edit `src/style.css`
* Exception should happen:

```
Uncaught TypeError: Cannot read property 'some' of null
at getReloadUrl (hotModuleReplacement.js:129)
at eval (hotModuleReplacement.js:145)
at NodeList.forEach (<anonymous>)
at reloadStyle (hotModuleReplacement.js:140)
at update (hotModuleReplacement.js:194)
at functionCall (hotModuleReplacement.js:24)
```

Why?

* `document.currentScript` is absent due to preload
* Last script is not our script, because page has `<script>` without `src` in the end of page
* `getCurrentScriptUrl` returns `null`
5,236 changes: 5,236 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

20 changes: 20 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "mini-css-extract-plugin-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^3.5.3",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
}
}
12 changes: 12 additions & 0 deletions src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
let div = document.createElement('div');
document.body.appendChild(div);

// My page have <script> without `src` in the bottom
let script = document.createElement('script');
document.body.appendChild(script);

import(/* webpackChunkName: 'with-preload' */ './with-preload.js');

if (module.hot) {
module.hot.accept('./with-preload.js');
}
8 changes: 8 additions & 0 deletions src/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
div {
display: inline-block;
width: 200px;
height: 200px;
background: red;
/* Uncomment next line for HMR: */
/* background: green; */
}
3 changes: 3 additions & 0 deletions src/with-css.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import './style.css';

console.log('with css');
8 changes: 8 additions & 0 deletions src/with-preload.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// Wait for `webpackPreload` finish
// to break `document.currentScript`
// Maybe it's not strictly required
setTimeout(() => {
import(
/* webpackChunkName: 'with-css', webpackPreload: true */ './with-css.js'
);
}, 100);
35 changes: 35 additions & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
const _path = require('path');
const { HotModuleReplacementPlugin } = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
plugins: [new MiniCssExtractPlugin()],
entry: _path.join(__dirname, 'src/main.js'),
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: true,
},
},
'css-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin(),
new HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title: 'mini-css-extract-plugin demo',
}),
],
devServer: {
hotOnly: true,
},
};

0 comments on commit c09e3ed

Please sign in to comment.