title: Integrate React 17 with webpack 5 and babel-plugin-react-css-modules (css modules with stylename)
body: <p>I am trying to setup a react app with latest versions.
  React 17, Webpack 5 and other modules.</p>
  <p>I need css modules with styleName concept by using <strong>babel-plugin-react-css-modules</strong></p>
  <p>Trying to run the code shows the output but no styles are applied.</p>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;react-app&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;React Template App&quot;,
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;webpack serve --mode development&quot;,
      &quot;build&quot;: &quot;webpack --mode production&quot;,
      &quot;format&quot;: &quot;prettier --write \&quot;src/**/*.js\&quot;&quot;,
      &quot;eslint-fix&quot;: &quot;eslint --fix \&quot;src/**/*.js\&quot;&quot;
    },
    &quot;dependencies&quot;: {
      &quot;babel-plugin-react-css-modules&quot;: &quot;^5.2.6&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.12.10&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.12.11&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.12.10&quot;,
      &quot;babel-eslint&quot;: &quot;^10.1.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
      &quot;css-loader&quot;: &quot;^5.0.1&quot;,
      &quot;eslint&quot;: &quot;^7.16.0&quot;,
      &quot;eslint-config-react&quot;: &quot;^1.1.7&quot;,
      &quot;eslint-loader&quot;: &quot;^4.0.2&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.21.5&quot;,
      &quot;file-loader&quot;: &quot;^6.2.0&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^4.5.0&quot;,
      &quot;less&quot;: &quot;^4.0.0&quot;,
      &quot;less-loader&quot;: &quot;^7.2.0&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^1.3.3&quot;,
      &quot;prettier&quot;: &quot;2.2.1&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;webpack&quot;: &quot;^5.11.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.2.0&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;
    }
  }
  </code></pre>
  <p><strong>webpack.config.js</strong></p>
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
    entry: './src/index.js',
    output: {
      path: __dirname + '/dist',
      publicPath: '/',
      filename: 'bundle.js'
    },
    devServer: {
      contentBase: path.join(__dirname, &quot;dist&quot;),
      open: true,
      host: &quot;localhost&quot;,
      compress: true,
      port: process.env.CLIENT_PORT,
      hot: true,
      quiet: false
    },
    module: {
      rules: [{
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader', 'eslint-loader']
        },
        {
          test: /\.css$/,
          use: [
            'style-loader',
            MiniCssExtractPlugin.loader,
            // &quot;less-loader&quot;,
            {
              loader: 'css-loader',
              options: {
                modules: true,
              }
            }
          ],
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [&quot;file-loader&quot;]
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: &quot;./public/index.html&quot;,
        filename: &quot;./index.html&quot;,
        favicon: &quot;./public/favicon.ico&quot;
      }),
      new MiniCssExtractPlugin({
        filename: &quot;[name].css&quot;,
        chunkFilename: &quot;[id].css&quot;
      })
    ],
    devtool: 'inline-source-map',
  };
  </code></pre>
  <p><strong>.babelrc</strong></p>
  <pre><code>{
    &quot;presets&quot;: [
      &quot;@babel/preset-env&quot;,
      &quot;@babel/preset-react&quot;
    ],
    &quot;plugins&quot;: [
      [
        &quot;babel-plugin-react-css-modules&quot;,
        {
          &quot;webpackHotModuleReloading&quot;: true,
          &quot;autoResolveMultipleImports&quot;: true
        }
      ]
    ]
  }
  </code></pre>
  <p><strong>home.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  
  import &quot;./style.css&quot;;
  
  const Home = () =&gt; {
    return (
      &lt;div styleName=&quot;container&quot;&gt;
        &lt;div styleName=&quot;title&quot;&gt;Hello from Home CSS&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Home;
  </code></pre>
  <p><strong>style.css</strong></p>
  <pre><code>.container {
    display: flex;
    flex-direction: column;
  }
  
  .title {
    font-size: 24px;
    color: red;
  }
  </code></pre>