Unavailable classNames when using css-modules

[ghost]

Hey, I'm overriding moduleSass loader of the webpacker config and I cannot use imported styles in react,

here's example of my override

let sassLoader = environment.loaders.get('moduleSass');
let index = environment.loaders.get('moduleSass').use.findIndex(el => el.loader === 'css-loader');

sassLoader.use[index].options = {
  modules: {
    namedExport: true,
    localIdentName: '[local]--[hash:base64:5]',
  },
  esModule: true,
  sourceMap: true,
};

btw I've tried to use code examples from https://github.com/rails/webpacker/issues/756#issuecomment-327148547 without any modification and build just fails. I can see the that the file is available in the html document but unable to apply classname, styles object is empty I import it like this: import * as styles from './styles.module.scss';

[ghost]

I've kinda found the workaroud for that, if I override not moduleSass but just sass and left the styles file name styles.module.scss everything works, idk what is wrong with the config, but it looks like unexpected behaviour. thing is if I rename file to styles.scss it will return an empty styles object

[mcmire]

Using * as inside of your import doesn't look quite right to me. Have you tried import styles from './styles.module.scss'?

[ghost]

@mcmire yes I've tried different ways to import styles. so it doesn't really matter how I import styles it works with workaround I've described in https://github.com/rails/webpacker/issues/2995#issuecomment-826721934 and for me it looks like unexpected behaviour.

[mcmire]

@NikitaProkofyevVKDevLab Gotcha, I didn't catch that.

I guess I don't really know what you were trying to do originally, but glad you worked it out.

[ghost]

I still have a question though, I'm currently trying to use styleName properties in react with this setup and I hashes of local stylenames doesn't match, everything else works fine, I mean css files generated correctly and stylename properties generate stylenames correctly but the last part with the hash is different. maybe someone can tell me what's wrong. I've checked that localIdentName and generateScopedName match. I'm using latest babel-plugin-react-css-modules and here's the related code from babel.config.js

['react-css-modules', {
        filetypes: {
          '.scss': {
            syntax: 'postcss-scss'
          }
        },
        generateScopedName: '[name]__[local]___[hash:base64:5]'
      }]

[mcmire]

@NikitaProkofyevVKDevLab Ah — thanks for the additional context behind your problem, that helps a lot.

I haven't used react-css-modules all that much. However my sense (considering that there has to be some case in the real world in which react-css-modules does work) is that something within the Webpack config is clashing or not lining up correctly. I think the first step here is to get a fuller picture. Would you mind going into your config/webpack/development.js, and at the bottom, change:

module.exports = environment.toWebpackConfig()

to:

const webpackConfig = environment.toWebpackConfig()

console.log(require("util").inspect(webpackConfig, { depth: null })

module.exports = webpackConfig

Then copy and paste the output you get here. That should give you the entire Webpack config that Webpacker is creating.

[joshunger]

I ran across something similar your styled-loader might be an old version.