[contenthash] generated by this plugin does not match the hash generated by css-loader 5.2.0

[meglio]

Content hashes in css class names generated by this plugin are not the same as the hashes generated by css-loader.

Example:

babel-plugin-react-css-module => navbar__container___2dO7z css-loader => navbar__container___ocJ3d

Debugging webpack reveals the reason - the options.content values used are different. Example (actual library name replaced by xxx):

content value used by babel-plugin-react-css-module:

node_modules/xxx/components/Navbar/navbar.scss+container

content value used by css-loader:

node_modules/frontier-pub/components/Navbar/navbar.scss[NIL]container

In the second value above, [NIL] is \x00

This \x00 character is used in css-loader/dist/utils.js like this:

options.content = `${options.hashPrefix}${relativeMatchResource}${relativeResourcePath}\x00${localName}`;

Versions:

• css-loader: 5.2.0
• babel-plugin-react-css-module: 5.2.6

[meglio]

Some more insight:

Here is how the options.content is generated by generic-names/index.js/function generate(), which is used by your plugin.

var loaderOptions = {
      content:
        hashPrefix +
        path.relative(context, filepath).replace(/\\/g, "/") +
        "+" +
        localName,
      context: context
    };

You are using generic-names of version ^2.0.1.

I can confirm that generic-names of version 3.0.0 uses \x00 instead: https://github.com/css-modules/generic-names/blob/0915569bf4bbeb4130723cff45e2b5c5d3702cf4/index.js#L37

[meglio]

Please check if this pull request can be accepted:

https://github.com/gajus/babel-plugin-react-css-modules/pull/303

[Stephane-Ag]

For anyone finding this, see comment in PR. Seems best to just stop using this package. I tried this one and it works well!