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,