Storybook: Need Help - Error : Aborting CSS HMR due to changed css-modules locals

[Aarbel]

Screenshot

How to reproduce

1. Add a .root1 css class in storybook React starter's Button component.
2. Save it
3. That generates this webpack error.

How could i fix it ? (i'm not webpack expert)

Files

JS

import React, { Component } from 'react';

import s from './button.css';

class Button extends Component {
  static defaultProps = {
    fetching: false,
    children: 'Validate',
  };

  render() {
    return (
      <a
      className={s.root}
      onClick={this.props.onClick}
      >
        { this.props.children }
      </a>);
  }
}

export default Button;

CSS

.root {
    border-style: solid;
}
// the added class that causes the error
.root1 {
    border-style: solid;
}

WEBPACK CONFIG

const path = require("path");


module.exports = {
  module: {
    rules: [
      {
        test: /\.css/,
        loaders: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]',
            },
          }
        ],
      },
    ],
  },
}

Impact

the .root1 style isn't loaded.

Note

killing process + npm start don't throws errors, we can use .root1 class (but we lose HMR...)

[Hypnosphi]

I was experiencing this as well, will investigate

[Hypnosphi]

Looks like the issue is in style-loader:

https://github.com/webpack-contrib/style-loader/issues/320

They ask for a reproduction case, can you please provide them one

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[aleph-naught2tog]

We are running into a similar issue, where this error gets thrown in the console quite frequently and more often than not we have to manually reload Storybook for changes to appear when made in module files, especially after adding a new class.