webpack2 - hash and path differ in css loader and bablerc

[danikenan]

According to closed issue #4 generateScopedName should be added to .babelrc and its value should match the localIdentName of the css-loader.

However, when using the exact same value proposed there [path]___[name]__[local]___[hash:base64:5] for both, the value is not the same. The class on the element and the generated class name are not the same. Both the path and the hash parts of the strings differ, so the style is not applied.

The html element is:

<div class="src-collectors-containers-___Collectors__root___3x28u">test</div>

But the class in the style tag is:

.collectors-containers-___Collectors__root___2F0Qi {
  color: red; 
}

My webpack reads:

rules: [{
        test: /\.scss$/,
        loaders: [
          'style?sourceMap',
          'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
          'resolve-url',
          'sass?sourceMap'
        ]
      }
]

and my babelrc reads:

plugins: [
            [
              'react-css-modules',
              {
                generateScopedName: '[path]___[name]__[local]___[hash:base64:5]' 
              }
            ],
          ]

Just as in the examples, but it does not work.

[tyler-dot-earth]

✔️ Confirmed similar problem in my own webpack 2 test app recently. https://github.com/tsnieman/webpack2test/blob/1664f69c3c1739adbf8fd84be9a554a7668bb88f/config/webpack.config.dev.js#L88-L91

// TODO  want to use something more like '[path]__[name]__[local]___[hash:base64:5]'
// but it seems that the react css modules babel plugin  includes 'src' as part
// of [path] and the css loader doesn't ... need to "align" them.
localIdentName: '[name]__[local]',

[ahan]

I fiexed this by commented out the webpack2's context parameter

// context: resolve(__dirname, '../src'),

[gajus]

Use context configuration. https://github.com/gajus/babel-plugin-react-css-modules#configuration

[sashako]

@gajus, I'm still experiencing the issue. I'm using webpack 2.2.0 and babel-plugin-react-css-modules 2.2.0. I have no context defined in neither babelrc or webpack config (so both should default to current dir). Both files are in the the same directory, and yet hashes still differ. I tried setting context in webpack config too process.cwd() - same result.

[guoerwei]

@sashako
try to use LoaderOptionsPlugin?

new webpack.LoaderOptionsPlugin({
  options: {
    context: __dirname,  // use this context
  }
})