Webpack 4 compatibility

[navarroaxel]

Hi, I can't use the css-hot-loader with webpack@4 because I'm getting this error message: Uncaught TypeError: Cannot read property 'call' of undefined.

This is the webpack code that is failling:

// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));

The modules[moduleId] is undefined and the moduleId value is ./node_modules/css-hot-loader/hotModuleReplacement.js.

I don't know which webpack's breaking change is the cause of this error.

This is the webpack's function where this error comes:

/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {},
/******/ 			hot: hotCreateModule(moduleId),
/******/ 			parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),
/******/ 			children: []
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}

Versions
node@6
webpack@4.1.1
css-hot-loader@1.3.8

[shepherdwind]

Can you give me a tiny example code, so I can reproduce the problem. Maybe you can fork this repo, and modify the code of examples dir.

[navarroaxel]

Hi, @shepherdwind. I have tried to create a tiny repo with this issue, but it's working. I'm investigating how can I reproduce the bug of my app in the tiny repo.

In my app, the first build fails, but if I change a SASS file and save it, the hot reload fix the issue and the JS error is gone. So, the error is generated in the first build, but is fixed in the hot build.

Do you have any idea about the source of this issue?

[smoakey]

I am having the same issue. I also noticed that changing a file does recompile but the resulting styling change does not appear until after browser reload.

[malliapi]

👍 +1 for this. experiencing the same issue

[shepherdwind]

Can anybody provide me an example code? It is hard to find what is the problem by just some description.

[navarroaxel]

Hi @shepherdwind! I have a tiny repo where the error appears: https://github.com/navarroaxel/webpack-css-hot-bug.

First, I added the extract-text-webpack-plugin@4.0.0-beta.0 and css-hot-loader@1.3.8 and the bundle is correct.
Second, I added react@16.2.0 and babel-core@6.26.0 and the error come to me. I think react is casual but babel-loader@7.1.4 is the origin of the incompatibility.

[navarroaxel]

I have removed react, and I put babel-preset-env@1.6.1 and the error is there.

[shepherdwind]

This problem can fix to import css-hot-loader/hotModuleReplacement manually, like this

css-hot-loader/examples/webpack4/webpack.config.js

Line 7 in b78e257

output: ['css-hot-loader/hotModuleReplacement', './src/index.js'], // entry file

The first time webpack build, css-hot-loader/hotModuleReplacement not loaded, so this error modules[moduleId] is undefined throw. After the css modified, the module will rebuild, and hotModuleReplacement can find now.

But I don't know why did this happen, I think this may have to do with the new webpack or extract-text-webpack-plugin.

Now, import css-hot-loader/hotModuleReplacement manually will helpful. And I will continue to fix this issue complete.

[shepherdwind]

version 1.3.9 fixed this issue. Thanks to @vagusX.

[VorontsovMaxim]

Hi @shepherdwind
Issue is still here :(
Minimal example https://github.com/VorontsovMaxim/css-hot-loader-bug

[sshmyg]

ExtractTextPlugin isn't relevant anymore. Is there any solution how to connect mini-css-extract-plugin and css-hot-loader?
mini-css-extract-plugin - plan add native support hmr, but right now it's just a plan.
Probably will be the best solution to merge this loader with mini-css-extract-plugin?

[sshmyg]

Works for me.

{
                test: /\.css$/,
                use: [
                    'css-hot-loader',
                    MiniCssExtractPlugin.loader,

[shepherdwind]

webpack-contrib/mini-css-extract-plugin#31 This issue fixed now, very good, I update example now. Try example

css-hot-loader/examples/webpack4/webpack.config.js

Lines 18 to 23 in 5a8ac39

	test: /\.css/,
	use: [
	'css-hot-loader',
	MiniCssExtractPlugin.loader,
	'css-loader',
	],

.

[ScipioIII]

Thx @shepherdwind. In my case, the fix was upgrading to mini-css-extract-plugin@0.4.0

[nevinm]

@shepherdwind What about scss support, where I am importing the scss file to the jsx react files.
I don't see much documentation revolving around support for that. Could you please point me in the right direction?

[hernimen]

@shepherdwind not working for my. I need to restart my server every time...
`const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /.css/,
use: [
'css-hot-loader',
MiniCssExtractPlugin.loader,
'css-loader',
],
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
`

[AdamAnSubtractM]

@shepherdwind What about scss support, where I am importing the scss file to the jsx react files.
I don't see much documentation revolving around support for that. Could you please point me in the right direction?

@shepherdwind , should this work for SASS as well or is that still yet to be supported. I too am having trouble getting this to work.

[ScriptedAlchemy]

It works with anything. Set up your build like normal then just add the loader at the top

[ScriptedAlchemy]

If you really can't make it work, try this
https://github.com/faceyspacey/extract-css-chunks-webpack-plugin

[AdamAnSubtractM]

@ScriptedAlchemy , Thanks for your reply, i'll definitely check it out!

[ScriptedAlchemy]

Pay attention to if it's CSS modules or not. Both packages require an extra flag

[ScriptedAlchemy]

Full disclosure, mine is a combo of this repo and a few of my own modifications, then I rewrote part of Webpack miniCSS plugin.

My work is in part, thanks to @shepherdwind