Create-react-app: css modules not working in production (heroku)

[OriAmir]

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]

Would you like to try out the latest alpha version which comes with css modules support?
https://github.com/facebook/create-react-app/issues/3815

[OriAmir]

@bugzpodder
hi i try to update project to version 2 , but now what?
i need to change something?
until now i just create css and import it's as style to my component , but now it's still not recognise any of my css
thanks

[bugzpodder]

The alpha version supports css modules out of the box. You should be able to import a css module directly from a js file. You'll need provide more info such as package.json as well as the code you wrote to figure out what went wrong

[OriAmir]

@bugzpodder Is it safe to use this alpha version ? what is mean for the future? there is a lot of changes all the time? and how can I be updated all the time with the last version of this?

tnx!

[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.

[keerkeerhi]

you should change "node_modules\react-scripts\config\webpack.config.dev.js" and not "webpack.config.prod.js".

[OriAmir]

@keerkeerhi I change this file and it's work on dev but not on production.
how file node_modules\react-scripts\config\webpack.config.dev.js relative to prod version?

[bugzpodder]

@OriAmir did you end up giving the alpha build a try? That's the easiest solution, or you have to use something like https://github.com/codebandits/react-app-rewire-css-modules

[OriAmir]

@bugzpodder I try the alpha build and it's works , I just worry a little bit because it's alfha version.

one more question : what about fonts and images? is it also build in the new version? because until now I use like this in my webpack:

`
{
test: /.(eot|woff2?|ttf|otf)(\?.*)?$/i,
loader: 'url-loader?limit=5120&name=[path][name].[hash].[ext]'
},

  {
    test: /\.(jpe?g|png|gif|svg)(\?.*)?$/i,
    loader: 'url-loader?limit=5120&name=[path][name].[hash].[ext]!img-loader'
  }`

tnx again !

[bugzpodder]

It should be fine: https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/config/webpack.config.prod.js#L376
https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/config/webpack.config.prod.js#L249

[OriAmir]

@bugzpodder
Hey , I heard that version 2 of create-react-app is released . If I will update my beta version something will break or what ?

thanks !

[bugzpodder]

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