Document how to use with create-react-app

[gajus]

tl;dr;

Use https://github.com/sharegate/craco.

Create craco.config.js:

const CSS_MODULE_LOCAL_IDENT_NAME = '[local]___[hash:base64:5]';

module.exports = {
  style: {
    modules: {
      camelCase: true,
      localIdentName: CSS_MODULE_LOCAL_IDENT_NAME
    }
  },
  babel: {
    loaderOptions: {
      // Without this Babel caches module name resolution,
      // e.g. wrongly identifies that CSS module does not exist.
      cacheDirectory: false,
    },
    plugins: [
      [
        'babel-plugin-react-css-modules',
        {
          attributeNames: {
            activeStyleName: 'activeClassName'
          },
          filetypes: {
            '.scss': {
              syntax: 'postcss-scss'
            }
          },
          generateScopedName: CSS_MODULE_LOCAL_IDENT_NAME,
          handleMissingStyleName: 'warn'
        }
      ]
    ]
  }
};

[josh18]

Not sure what I am doing wrong but when I use ^ config on a new CRA project I get different hashes for my style / class name. If I set CSS_MODULE_LOCAL_IDENT_NAME to something static like test it works.

[gajus]

Do you have any other custom configuration?

This would indicate a mismatch of the context configuration.

https://github.com/gajus/babel-plugin-react-css-modules#options

Which should just work with default create-react-app setup.

[josh18]

Just reprod it doing

1. npx create-react-app my-app
2. cd my-app
3. npm install @craco/craco babel-plugin-react-css-modules
4. Rename App.css to App.module.css
5. Rename className to styleName in App.js
6. npm start

I've seen a couple people saying that config worked for them so I wonder if CRA changed something recently that broke it.

[gajus]

Are you using Windows by any chance?

[josh18]

Yes

[gajus]

Never tested this with Windows.

My gut feeling is that the paths are resolved differently in the webpack config and in the Babel config. As far as I can think, this would be an issue with create-react-app/ Craco, not bprcm.

Cannot offer a fix as I do not use windows.

Leaving this open as it is unconfirmed.

[josh18]

Seems like the issue is a difference in the content property that gets passed to loader-utils css-loader

src\\App.module.css+App

babel-plugin-react-css-modules (via generic-names)

src/App.module.css+App

Also, I'm wondering if this might be the same issue as #239?

Seems like it is caused by this .replace(/\\/g, "/") in generic-names: https://github.com/css-modules/generic-names/blob/master/index.js#L36. Should I open an issue there? Doesn't look like they have any release notes or proper commit messages so no idea what it is needed for.

[gajus]

Seems like it is caused by this .replace(/\/g, "/") in generic-names: https://github.com/css-modules/generic-names/blob/master/index.js#L36. Should I open an issue there? Doesn't look like they have any release notes or proper commit messages so no idea what it is needed for.

That indeed seems like a likely underlying issue. It depends though on how webpack is treating context paths. I suggest raising an issue with generic-names and CC me too. Curious to know what is the suggested workaround; hard to believe that no one who is using Windows did not get this to work.

[josh18]

For some reason CRA uses css-loader v1, I'm thinking of updating it to v2 as it might do things the same way as generic-names. If that doesn't work I'll create an issue.

Note the context property is the same, it is the content property that is different.

[josh18]

Can confirm it works with css-loader v2 so maybe we just need to document that somewhere. Still not sure why CRA uses css-loader v1.

[josh18]

Looks like the css-loader dependency will be updated to v2 in CRA v3: https://github.com/facebook/create-react-app/pull/6614

Not sure how no one else has come across this when using CRA and babel-plugin-react-css-modules.

[gajus]

Thank you for the detective work. I will leave this issue open until v3 CRA is released so that others can quickly find it.

[CKGrafico]

wohooo this have worked like a charm :) only to add more info, if you try this solution please maintain the '.module.scss' in your scss files :)

[jinixx]

Ran into this today, looks like still broken. Any workarounds for now?