css modules not working in production (heroku)

I read all possible question about this topic but not found anything that help me.

I build react app using create-react-app and want to use css modules. So I change the weback files found in node_modules/react-scripts/config because I don’t want to ‘eject’ the config files.

On dev everything works well and it’s recognize the modules , but on production it’s not working. ( in dev not exist ‘ExtractTextPlugin’ plugin anyway)

So, laster I try to ‘eject’ the configuration files and then do change the web pack prod file that found in the src/config and it’s work, but I really don’t want to eject all configuration files for this.

I try also to copy exactly the same web pack.config.prod.js file that work after eject but for some reason it’s doesn’t help

this is the code from my web pack.config.prod.js:

        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          Object.assign(
            {
              fallback: {
                loader: require.resolve('style-loader'),
                options: {
                  hmr: false,
                },
              },
              use: [
                {
                  loader: require.resolve('css-loader'),
                  options: {
                    importLoaders: 1,
                    modules: true,
                    localIdentName: '[name]__[local]__[hash:64:5]',
                    //   minimize: true,
                    //   sourceMap: shouldUseSourceMap,
                  },
                },
                {
                  loader: require.resolve('postcss-loader'),
                  options: {
                    // Necessary for external CSS imports to work
                    // https://github.com/facebookincubator/create-react-app/issues/2677
                    ident: 'postcss',
                    plugins: () => [
                      require('postcss-flexbugs-fixes'),
                      autoprefixer({
                        browsers: [
                          '>1%',
                          'last 4 versions',
                          'Firefox ESR',
                          'not ie < 9', // React doesn't support IE8 anyway
                        ],
                        flexbox: 'no-2009',
                      }),
                    ],
                  },
                },
              ],
            },
            extractTextPluginOptions
          )
        ),
        // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.

I try many other configuration for this in the prod file but nothing effect on prod

[bugzpodder]

@OriAmir While the alpha version isn’t without bugs (see issues opened), I think as long as you test your production build on a staging server and make sure everything works correctly you should be fine (because it is basically building your source code and you’ve tested the final result). Under the hood react-scripts only really uses beta version of babel 7. Personally I’ve been using the alpha build in production for a couple of months now. Whenever a new alpha is released you can always update the version number in package.json very much like any other package.

[bugzpodder]

@OriAmir give it a try, it should be stable.