shepherdwind/css-hot-loader

This is a css hot loader, which support hot module replacement for an extracted css file.

css-hot-loader's Issues

Code spliting

Hey. First thanks for such great tool man, it's really helpful :) But I have a question.

What about code spliting? After including react-loadable (witch also support hot reload by HOC) I see that this package works not like before. In console I see updated styles.css file and then [HMR] Reload all css at the end that reload all css and I see it like flicker.

So..may be you have any ideas why does it happens and how can we resolve it?

Possible explanation for non-working HMR

I couldn't get it to work even after following your examples. However, I discovered that if I change the following:

  plugins: [
    new ExtractTextPlugin({
      filename: 'bundle.[name].[contenthash].css',
    }),

to this:

    new ExtractTextPlugin({
      // filename: 'bundle.[name].[contenthash].css',
      filename: 'output.css',
    }),

it started to work. It seems that the CSS bundle filename must be static for CSS HMR to work properly. Perhaps this will help someone in the future :)

Not working with css as an entry point & webpack 4

The page fully reloads when I'm changing the scss file and I get the following warning.

[HMR] Cannot apply update. Need to do a full reload!
[HMR] Error: Aborted because ./sass/style.scss is not accepted
Update propagation: ./sass/style.scss -> 5
    at hotApply (http://localhost:5000/webpack/css/style.js:526:30)
    at http://localhost:5000/webpack/css/style.js:364:22

Here the relevant parts from my webpack config:

entry: {
        'css/style': './sass/style.scss',
},
plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            allChunks: true,
        }),
],
module: {
        rules: [
            {
                test: /\.scss$/,
                include: [
                    path.resolve(paths.sources.sass),
                ],
                use: [
                    'css-hot-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: true }
                    },
                ]
            },
        ]
}

Throwing odd Error

I can see what the issue is, but if I remove the css-hot-loader it loads fine. I've set up as usual and can't see any issues with my set up:

ERROR in ./stylesheets/application.scss

Module build failed: ModuleBuildError: Module build failed:

               ^
  Invalid CSS after "...  var cssReload": expected "{", was '= require("../../..'
  in /Users/adrianstainforth/sites/gll3/app/javascript/stylesheets/application.scss (line 4, column 21)
at runLoaders (/Users/adrianstainforth/sites/gll3/node_modules/webpack/lib/NormalModule.js:195:19)
at /Users/adrianstainforth/sites/gll3/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /Users/adrianstainforth/sites/gll3/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/Users/adrianstainforth/sites/gll3/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.asyncSassJobQueue.push [as callback] (/Users/adrianstainforth/sites/gll3/node_modules/sass-loader/lib/loader.js:55:13)
at Object.<anonymous> (/Users/adrianstainforth/sites/gll3/node_modules/async/dist/async.js:2257:31)
at Object.callback (/Users/adrianstainforth/sites/gll3/node_modules/async/dist/async.js:958:16)
at options.error (/Users/adrianstainforth/sites/gll3/node_modules/node-sass/lib/index.js:294:32)

@ ./packs/application.js 1:0-41

Setup from webpack config:

if (ifDevelopment()) {
    return {
      test: /\.(scss|sass|css)(\.erb)?$/i,
      use: [
        {
          loader: 'css-hot-loader',
          options: {
            fileMap: '../css/{fileName}',
          },
        },
      ].concat(ExtractTextPlugin.extract(extract)),
    };
  }

fileMap broken?

@shepherdwind would you mind providing a full example for this option? I'm able to get css-hot-loader working great normally, but with the filemap option, I'm having trouble.

'js/main':  './src/js/main.js',
'css/main': './src/scss/main.scss'

If the above are my entry points, I would assume I could do something like

{
  test: /\.scss$/,
  use: [
    { 
      loader: 'css-hot-loader',
      options: {
        fileMap: '../{fileName}'
      }
    }].concat(ExtractTextPlugin.extract(
    {
      fallback: 'style-loader',
      use: ['css-loader', 'sass-loader']
     }
  )),
}

HELP ME

css-hot-loader worked
but what is it?
https://drive.google.com/file/d/1JgTkd4yV05zGVrqCFjP6G_kpsIIP8ZFM/view?usp=drivesdk

Breaks when using sourceMap

When using:

    options: {
      sourceMap: true
    }

In both cssLoader, postcssLoader & sassLoader, I'm encountering full page reloads instead of hot reloads.

I also get strange errors in the console:

404 GET blob:http://localhost:3000/dcb2d879-2491-4305-9eaf-a30154ab4fdb?1502374626966 

PS: I'm not using ExtractTextLoader but rely on your package to get live reload with css modules.

Not working if the CSS is an entry point

I'm using Webpack2. In my configuration, SCSS files aren't required by javacript, but they are entry points by themselves, like this:

var config = {
  entry: {
    bootstrap: path.join(DIRS.ASSETS, './css/bootstrap.scss'),
    main: path.join(DIRS.ASSETS, './css/main.scss'),
    // etc
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
          use: [
            { loader: "css-loader" },
            { loader: "sass-loader" }
          ],
        }))
      },
   ]
}

When I modify the source SCSS files, they are not hot reloaded. It triggers the hot update, but nothing is updated. Any ideas?

Error: Can't resolve 'normalize-url' in ./node_modules/css-hot-loader/hotModuleReplacement.js

I am running into some issues and running out of ideas what cause them:

ERROR in ./node_modules/css-hot-loader/hotModuleReplacement.js
Module not found: Error: Can't resolve 'normalize-url' in './node_modules/css-hot-loader'
 @ ./node_modules/css-hot-loader/hotModuleReplacement.js 1:19-43
 @ ./project/src/App.scss
 @ multi ./project/src/App.ts ./project/src/App.scss

The application launch, yet seeing the following issues in inspector:

Uncaught ReferenceError: require is not defined
    at Object.<anonymous> (external "normalize-url":1)
    at __webpack_require__ (bootstrap 18c624366c5c13843b65:677)
    at fn (bootstrap 18c624366c5c13843b65:87)
    at Object.<anonymous> (hotModuleReplacement.js:1)
    at __webpack_require__ (bootstrap 18c624366c5c13843b65:677)
    at fn (bootstrap 18c624366c5c13843b65:87)
    at Object.<anonymous> (App.scss:4)
    at __webpack_require__ (bootstrap 18c624366c5c13843b65:677)
    at fn (bootstrap 18c624366c5c13843b65:87)
    at Object.defineProperty.value (bootstrap 18c624366c5c13843b65:723)

And it is preventing the application initialise.

Below are the dependencies in my package.json:

"devDependencies": {
    "@types/node": "^8.0.28",
    "app-root-path": "^2.0.1",
    "autoprefixer": "^7.1.4",
    "babel-core": "^6.26.0",
    "babel-plugin-module-resolver": "^2.7.1",
    "babel-plugin-root-import": "^5.1.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "babel-plugin-transform-strict-mode": "^6.24.1",
    "babel-preset-env": "^1.6.0",
    "browser-sync": "^2.18.13",
    "browser-sync-webpack-plugin": "^1.2.0",
    "clean-css-loader": "^0.1.3",
    "clean-webpack-plugin": "^0.1.16",
    "connect-history-api-fallback": "^1.3.0",
    "css-hot-loader": "^1.3.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.0",
    "fast-sass-loader": "^1.3.0",
    "file-loader": "^0.11.2",
    "fork-ts-checker-webpack-plugin": "^0.2.8",
    "gulp": "^3.9.1",
    "gulp-help": "^1.6.1",
    "gulp-plumber": "^1.1.0",
    "gulp-sync": "^0.1.4",
    "gulp-util": "^3.0.8",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.5.3",
    "nodemon": "^1.12.1",
    "only-if-changed-webpack-plugin": "0.0.1",
    "postcss-loader": "^2.0.6",
    "run-sequence": "^2.1.0",
    "style-loader": "^0.18.2",
    "stylelint": "^8.1.1",
    "stylelint-webpack-plugin": "^0.9.0",
    "ts-loader": "^2.3.7",
    "ts-node": "^3.3.0",
    "tslint": "^5.7.0",
    "tslint-loader": "^3.5.3",
    "typescript": "^2.5.2",
    "vinyl-named": "^1.1.0",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2",
    "webpack-stream": "^4.0.0"
  }

And below is how I configured the use of css-hot-loader in my webpack.config;

{
    test : /\.(css|sass|scss)$/,
    exclude : /node_modules/,
    use : ['css-hot-loader'].concat(ExtractText.extract({
        fallback : 'style-loader',
        use : [
            {
                loader : 'css-loader',
                options : {
                    constLoaders : 1,
                    minimize : true
                }
            },
            {
            loader : 'clean-css-loader',
                options : {
                    compatibility : 'ie8',
                    debug : true,
                    level : {
                        2 : {
                            all : true
                        }
                    }
                }
            },
            {
                loader : 'postcss-loader',
                options : {
                    plugins : loader => [
                        AutoPrefixer({
                            browsers : ['last 2 versions'],
                            cascade : false
                        })
                    ]
                }
            },
            {
                loader : 'fast-sass-loader',
                options : {
                    includePaths : [
                        'node_modules',
                        `${this.path.root.src}`
                    ]
                }
            }
        ]
    }))
}

can't work very well

Hi, First of all, thank you for this tool, which is very good to me.

But I've got a problem recently. When I use the postcss-loader to handle the CSS file。And Using postcss-global-import to refer to the global CSS file。

css-hot-loader can't work very well。

I hope you can solve this problem. Thank you very much！！！

// index.js
import './index.pcss';

// index.pcss（this is the point）
@global-import './globla.pcss';

When I modify the content of globla.pcss, css-hot-loader can't work very well。

Webpack 4 help - using in conjunction with mini-css-extract-plugin

Webpack 4 has issues with the extract text plugin
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues

So now, the recommended solution is to use mini-css-extract-plugin, but that one does not work with the hot reload.

I have attached a zip with sample use, I do not know where the issues lies, in css-hot-loader or mini-css-extract-plugin

react-demo.zip

Want help maintaining this?

Hey dude, dunno if you plan to keep working actively on your HMR stuff. Im the maintainer of extract-css-chunks which its own HMR was based off your work.

If you plan on keeping it active, we could collaborate on this repo. Otherwise if you are losing interested in it - Im willing to take over your work and advance it

Circumvent project assumptions

At the moment, if you have a main.js file it's expected that the css lives in main.css.

Though, people like me like to tweak the output folders of js & css files, e.g.: js/main.js and css/main.css
As you see, this violates the assumption that the css file lives in the same folder as the js file. Is it possible to have an option to make it more flexible?

Thanks.

Webpack 4 compatibility

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
[email protected]
[email protected]

Doesn't work

It doesn't work for me. No any effects.

webpack 2 config:

module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })),
      },
    ],
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      },
      ....

css required by js, same names for css and js

[hot reload not work] With splitChunks, reload the mismatch css file

With my follow webpack config, I get common.chunk.css , page1.chunk.css , page2.chunk.css, common.chunk.js, page1.chunk.js, page2.chunk.js

In this conditon:
If I import 'b.scss' both in page1 and page2 chunk , The 'b.css' content with be extract in common.chunk.css;
Then 'HotModuleReplaceMent.js' with hot reload 'page1.chunk.css' according to 'page1.chunk.js' when I try to change 'b.scss' import by page1Chunk. That is wrong ,I want to reload 'common.chunk.css';

If any other way to fix this problem?

entry: {
page1: '...',
page2: '...'
}
optimization: {
  splitChunks: {
            chunks: 'all',
            cacheGroups: {
                default: false,
                 common: {
                    chunks: 'initial',
                    name: 'common',
                    minChunks: 2,
                    minSize: 30000
              }
        }
   }
}
module: { 
  rules: [
{
        test: /\.scss$/,
        use: [
            'css-hot-loader',
            MiniCssExtractPlugin.loader,
            {loader: 'css-loader', options: {sourceMap: true}},
            {loader: 'sass-loader', options: {sourceMap: true}}
    ]}
   ]
}

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

Fix typo in description?

Hi! Thanks for making this, it's immensely helpful! 😃

I don't mean to be nitpicky but I figure this may make a better first impression to new visitors of the repo:

(should be 'support')

Not working with Webpack 3.x

Doesn't work for server-side rendering

That's why I hate webpack, react and all this shit!

Help pls - HMR Cannot apply update. Need to do a full reload!

[HMR] Cannot apply update. Need to do a full reload!
[HMR] Error: Aborted because 84 is not accepted

IMG:
https://drive.google.com/file/d/1EG47Kz46-73I4owAeYXazUjlZAmgmMtI/view?usp=drivesdk

Components are always re-rendered

• I'm submitting a ...

  • bug report

• What is the current behavior?
  When update a scss files, (bundled with mini-css-extract-plugin), component is always re-rendered

❌ Component is re-rendered

// BEFORE
.foo {
  font-size: 18px;
}
// AFTER
.foo {
  font-size: 20px;
}

• What is the expected behavior?
  Component should re-rendered only if content of styles.scss exports are changed

✔️ Component isn't re-rendered

// BEFORE
.foo {
  font-size: 18px;
}
// AFTER
.foo {
  font-size: 20px;
}

✔️ Component is re-rendered

// BEFORE
.foo {
  font-size: 18px;
}
// AFTER
.foo {
  font-size: 18px;
}
.bar {
  font-size: 20px;
}

• Please tell us about your environment:

  • Webpack: 4.16.1
  • Osx
  • CSS Hot Loader 1.4.1
  • Code splitting

Thank you for your work!

Adding the content hash in the css filename breaks reloading

Including the content hash in the filename causes reloading to fail without errors.

new MiniCssExtractPlugin({
    filename: "[name].style.[contenthash].css"
}),

This doesn't necessarily need to be fixed since the content hash isn't required in development, but I used the above code in my base webpack configuration because there wasn't any reason (before this issue) to have different names for development and production. Others might stumble upon the same problem, so maybe this could be mentioned in the docs?

Union with `mini-css-extract-plugin`

Hi, great work, we have PR what add hmr feature webpack-contrib/mini-css-extract-plugin#334, you may want to participate and help to implement this feature. We glad any help.

Object doesn't support property or method 'remove'

The remove method in this context throws an error in IE (11):

newEl.addEventListener('load', function () {
    newEl.isLoaded = true;
    el.remove();
  });
  newEl.addEventListener('error', function () {
    newEl.isLoaded = true;
    el.remove();
  });

Since the DOM web API is outside the scope of babel polyfills, perhaps this project should include a polyfill of some sort for this? Or rewrite the code to be more generally compatible (i.e. this.parentNode.removeChild(this)).

when App updated. Recompiling...,the web page will have no any style

when I have revised css file
then App updated. Recompiling...,
the web page will have no any style unless css reload all css

Call some function after CSS has reloaded

In my particular stack, I have a JS file which contains a map of each CSS class name to its hashed version. For hot reloading to work properly, this JS file needs to be regenerated after the CSS has changed. I already have a function to regenerate and reload the file, I just need a good way to call this function after the CSS has changed.

Would it make sense to add something to this library that will allow this?

Uncaught TypeError: Cannot read property 'call' of undefined

When starting the project with css-hot-loader included - the project returns Uncaught TypeError: Cannot read property 'call' of undefined -- after saving a component/file it disappears and starts working again.

Please do a git clone of this repository, make sure you're on branch chapter-5

https://github.com/wesharehoodies/webpack-2.0-from-scratch/tree/chapter-5

After cloning, npm i && npm run start -- the webpack compiles perfectly but the browser produces couple errors which are solvable by saving a file. Any hotfixes planned?

Indrek

Weird bug with code splitting on initial page load

When I load page 1 with chunks: main.js main.css 1.js 1.css and I change something part of chunk 1.css, the main.css gets reloaded.
When I load page 1 then navigate (with react-router-dom) to page 2 wich adds 2.js 2.css to the head, and I change something in 2.css, 2.css is hot reloading fine.

I'm using react-loadable to split chunks automatically but this probably unrelated.

"css-hot-loader": "^1.3.9",
 "mini-css-extract-plugin": "^0.4.0",
"webpack": "^4.6.0",
"react-loadable": "^5.3.1",

How do you use this with webpack 2?