CSS Modules no longer work

[Cinamonas]

As far as I can tell, #574 may have broken the usage of CSS Modules in React-Static. I’ve upgraded to the latest version and noticed that import styles from 'Foo.scss' no longer works as expected. If you attempt to reference a class name on the styles object, it results in undefined.

Environment

1. react-static -v: 5.8.2 (first non-working release, last working release is 5.8.1)
2. node -v: 8.9.3
3. yarn --version or npm -v: 5.6.0
4. Operating system: macOS 10.13.4

Steps to Reproduce the problem

1. Go to examples/sass
2. npm i
3. npm i react-static@5.8.2 (first non-working release)
4. Open static.config.js and add modules: true option on css-loader
5. Open App.js and replace import './app.scss' with import styles from './app.scss'
6. Add console.log(styles.content) below the app.scss import
7. Run npm stage
8. Notice that the console.log call results in undefined

Expected Behavior

If you did the steps outlined above on 5.8.1, it would work. You’d just need to remove the if condition surrounding ExtractTextPlugin.extract call in static.config.js (which was introduced to conform to changes in #574).

---

Let me know if I’m missing some trivial configuration that would allow me to use CSS Modules. Otherwise, changes in #574 need to be revisited.

/cc @lottamus

[JustFly1984]

I already pointed out that it is due to webpack.config.js refactoring, and introducing boolean isNode in react-static@5.8.2

[lottamus]

It looks like we just need to add modules: true to enable CSS modules

https://javascriptplayground.com/css-modules-webpack-react/

[Cinamonas]

@lottamus, as pointed out above, I’m adding that. My configuration hasn’t changed, but the CSS Modules no longer work since 5.8.2.

[rohmanhm]

Also, I can't get CSS Code Splitting on my app.
The CSS bundles now just compiled into a single CSS file.

[sudarshang]

I have a PR which upgrades react-static to webpack 4. Do you want to check if this issue is resolved by using that branch?

#605

[ScriptedAlchemy]

https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/tree/webpack-4

npm I extract-css-chunks-webpack-plugin@next

@Cinamonas @rohmanhm

[ScriptedAlchemy]

Plugin now released for webpack 4

[mrchief]

Are we using wp4 in react-static?

[Cinamonas]

@ScriptedAlchemy, could you elaborate? I don’t quite understand how this is a fix to the CSS Modules issue I described.

[JustFly1984]

Now, since webpack 4 is implemented, is there a guide how to enable CSS modules? Both of my projects made with React-static heavily depends on CSS modules, an it CSS modules are broken since 5.8.1. I want to update both projects to latest version, since NPM has found a ton of vulnerabilities in 5.8.1 but I can’t update until I’m sure that CSS modules are working with webpack 4

[tannerlinsley]

We’ll have a clear path to victory out as soon as possible. :)

…

On Tue, Jun 26, 2018 at 9:03 PM Alexey Lyakhov ***@***.***> wrote: Now, since webpack 4 is implemented, is there a guide how to enable CSS modules? Both of my projects made with React-static heavily depends on CSS modules, an it CSS modules are broken since 5.8.1. I want to update both projects to latest version, since NPM has found a ton of vulnerabilities in 5.8.1 but I can’t update until I’m sure that CSS modules are working with webpack 4 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#601 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCaJdz5XYCm9sluhFdea1abK7XXpKks5uAvX9gaJpZM4T0c3U> .

[JustFly1984]

Is there any updates or estimates?

[mrchief]

I got the CSSModules working with old setup. Had to remove the ExtractCssChunks part. Here's my working cut with 5.9.7 and etwp @ ^3.0.2

import ExtractCssPlugin from 'extract-text-webpack-plugin'
import path from 'path'
import postcssFlexbugsFixes from 'postcss-flexbugs-fixes'
import postcssPresetEnv from 'postcss-preset-env'

export default ({ config, stage }) => {
  let cssLoader = [
    {
      loader: 'css-loader',
      options: {
        localIdentName:
          stage === 'prod' ? '[hash:base64:8]' : '[path][name]---[local]',
        minimize: stage === 'prod',
        sourceMap: stage === 'dev',
        url: false
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        sourceMap: true,
        ident: 'postcss',
        plugins: () => [
          postcssFlexbugsFixes,
          require('postcss-import')(),
          require('postcss-url')(),
          postcssPresetEnv({
            features: {
              'nesting-rules': true
            }
          })
        ]
      }
    }
  ]

  if (stage === 'dev') {
    cssLoader = ['style-loader'].concat(cssLoader)
  } else if (stage === 'prod') {
    cssLoader = ExtractCssPlugin.extract({
      fallback: {
        loader: 'style-loader',
        options: {
          sourceMap: false,
          hmr: false
        }
      },
      use: cssLoader
    })
  }

  return {
    test: /\.css$/, 
    loader: cssLoader
  }
}

[ScriptedAlchemy]

Does this help?

Looks related. Maybe?
webpack/webpack#1754

I’m relocating to the west coast so I’m pretty much offline till after the 4th :)

[kurdin]

after upgrade to @5.9.7 I could not build any more with error:
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

I added less support based on less-antdesign examples. Is it possible to fix ^5 branch to make it work same way as version @5.8.1 ?

P.S version 6 beta is broken for my setup as well with strange react error when importing some of ant.design components, so I would like to keep branch 5 fully functional if possible.

[kurdin]

After more time spending on the problem and tests, looks like this issue not related to version @5.9.7, at least for me.

This is more global vs local install issue, so I solved this by installing react-static locally and using it via node_modules/.bin/react-static

[ScriptedAlchemy]

hey guys, sorry for such a delay.

Regarding my css loader extract-css-chunks-webpack-plugin which is part of react static.
Im about to release a next tag build on npm which should get HMR and CSS modules working again.

This assumes you are on the new RS6

UPDATE:::: its on npm under @next tag

[JustFly1984]

Thanx, that means I can try to update! Can't wait!!!

[ScriptedAlchemy]

Soon as it’s merged I’ll update the project. Otherwise just manually install the latest into the repo

…

On Tue, Jul 10, 2018 at 7:11 PM Alexey Lyakhov ***@***.***> wrote: Thanx, that means I can try to update! Can't wait!!! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#601 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYGpTMUIDxfSSCnnDh62tFQtFoEGZ-Tbks5uFV7pgaJpZM4T0c3U> .

[ScriptedAlchemy]

faceyspacey/extract-css-chunks-webpack-plugin#80

[ScriptedAlchemy]

@JustFly1984 This has been merged. @tannerlinsley i think you might be able to close the issue if @Cinamonas can confirm

[Cinamonas]

I’ll upgrade to v6 as soon as it’s out of beta.

[tannerlinsley]

Is there anything else that needs to happen in v6 to make css modules work? I'll be honest, I don't use them (all emotion/styled-components here), so I'm not sure how it all works haha.

[jakeFeldman]

Is there any updates here? I have CSS modules working for dev in version 5.9.7, but when I build a production version the css is not extracted into the markup. I tried to migrate to v6 but I was not able to build/start the project, which is being tracked in #685. Thanks in advance.

[blakeperdue]

I'm including sass files (via import './app.scss' in App.js) and I'm running RS6 (6.0.0-beta.13) and extract-css-chunks-webpack-plugin@next (3.1.0-beta.2) but it's not working for me. I'm also using Material-UI (1.4.0).

Maybe I'm missing something. I'm including links to my source files in case that's helpful:

static.config.js: https://cl.ly/0r2I3O3u260u
index.js: https://cl.ly/2s2z3L0u232p
App.js: https://cl.ly/3E091G0N3H1W
Document.js: https://cl.ly/1G3W200H2E03
package.json: https://cl.ly/0E1W412A0y1a

When I build or just run local dev, you can see all the Material UI styles are properly getting loaded and applied. However, none of the styles in the app.scss file are being included anywhere:

@ScriptedAlchemy I know you're busy, but would love if you could just point me in the right direction. That would be super helpful. Thanks!

[blakeperdue]

I should also mention I do not have a plugins folder with any plugin files. I saw that the sass example did have this but other examples that use plugins did not. Also, the link in this repo for react-static-plugin-sass plugin is returning 404:

https://github.com/nozzle/react-static-plugin-sass

Not sure if that plugin has been deprecated or what. Any info would be appreciated!

[ScriptedAlchemy]

What should happen on the node side, is we just dont emit the file and use the locals section of CSS loader.

Ill check out RS build configuration around this aspect

[lz-allen]

@zack Jackson
I don't know why I always build error when I use "extract-css-chunks-webpack-plugin", on the contrary, "extract-text-webpack-plugin" won't. But the className built by this plug-in is undefined
I also purposely upgraded webpack 4.0

[ScriptedAlchemy]

Okay this is the same issue as some others are having. I patch it directly in projects. Here is it.

It was literally exactly this where stuff comes back undefined.

[nikaspran]

@ScriptedAlchemy please see #601 (comment) - this has nothing to do with ExtractCssModules itself, react-static just does not include it in the node stage and thus the classes never get exported as properties for css module imports.

I still haven't gotten around to creating a PR, but the workaround definitely works for both 5.x and 6.x.

[ScriptedAlchemy]

Ohhhh I noticed this before. It’s not emitting it the same way or something? I’ve been mening to look into it. please tag myself in the pr when you have time. It would be a huge help to many!

[Pixelatex]

@JustFly1984 We are not gatsby and if you're not helping, please don't be an ass about it as well.

[JustFly1984]

@Pixelatex I've been trying to work my way with react-static and CSS modules for several months, and there is too much issues among the webpack configuration. At the end you get extra css file embedded to and you can't do nothing about it.

[Pixelatex]

This is still an open source project and not a corporate-funded project, you can't expect us to support everything out of the box. Things take time. If you don't like it, that's fine, don't use it. But there's no need to actively tell people not to use our project because it wasn't up to your liking.

[ScriptedAlchemy]

Not the culture I’d like to see on the project, especially since gatsby is a funded project with millions poured into it.

I understand your frustration, and I do know that RS does indeed have complex Webpack composers which do make it hard to deal with build problems. But please understand RS6 is still in beta.

I understand your desire to move from frustration, but authors are under strain and there’s not that many of us. We do our best where we can. Trashing a project in beta is disrespectful.

Your opinion matters and your frustration is completely valid. But please don’t slam react static because of a css bug.

All in all, it took me seconds to rectify it in the projects of those who reached out for support.
Maybe a fix isn’t released, which I’ll follow up on. But damn, I get you’re upset, but that’s cold.

I’m confident if you can arrange $500k, we could compete with gatsby given a fraction of the budget and resources. That’s beyond the point though.

[JustFly1984]

It does not support CSS modules, and it will not support it for long time. This is a thread about CSS modules. I'm telling everybody who does need CSS modules as I am that it does not resolving this issue since 5.8.2 version. I was pointing this out for long time, and wasted my time.

[Pixelatex]

@ScriptedAlchemy Agreed, let's get this thing back on topic and fix it for the people who care

[ScriptedAlchemy]

Actually, I reached out and personally pull requested your private project. My PR remains open, it was you who never responded to me.

I will not let this ruin my day. But I cared about your challenges and even though I was exhausted, I went out of my way to fix your project free of charge. You could have voiced your opinion in a less emotional manner and / or pr worked with us.

Screw me tho, right?

[JustFly1984]

This did not worked out, I had the same issue after your fixes. I do not want to ruin anybody's day.

[ScriptedAlchemy]

Then give me some feedback dude! You had the author of half this crap working on your private project for free. I was waiting for your review so I could fix the issue once and for all. The fix I was trying to apply for you would have been the PR I open to this project.

Emotions aside. I do apologize that we didn’t pull through for you. If you do end up using either my tools or ones I’m accociated with. feel free to reach out, I am always willing to support our users and care about the success of their projects

[ScriptedAlchemy]

Now back to the point. @nikaspran, if we just include css plugin in node, will that rectify the issue based on your experience.

Would you be willing do join my slack channel and over a few messages one evening hammer this out together. I myself do not have a project using RS with css modules.

I’ve got write access, but help me pinpoint it.. what did you do to fix it? I’ll open a pr today if you have a demo project you can share, and are willing to speak to me

Based on your tldr above, I can open a V6 PR today.

[ScriptedAlchemy]

Okay this is actually simple to fix.

I’m going to add a new example project to the generator, then go back and write a comment along with the code in the sass examples and such that says “in-comment this if you want modules”

[tannerlinsley]

Sounds like things got a little heated for a bit. Given the conversation I'd like to echo and clarify some things from our contribution guidelines:

• This is open source, not a business, but that doesn't mean it's free. It's an exchange of knowledge and support to make great tools accessible to the world.
• React Static is developed and maintained for free by a number of very generous people. Thank you all for the help!
• GitHub and the contributor slack channel are not a support network. Keep support and questions of implementation on Spectrum.
• Competition is good, but trash talking a library you do not pay for and are not willing to actively contribute to is considered very disrespectful in my book and won't be tolerated in any of my repos.
• Let's make some awesome software!

Carry on!

[JustFly1984]

@tannerlinsley sorry bro, I didn't mean to be considered trash talking. Peace everybody.

[ScriptedAlchemy]

PR is open. Waiting on Tanner so i know how to test it via RS CLI, and obviously, once I'm at a computer. If someone can assist in testing it, ill be much obliged.

@nikaspran thank you very much for your efforts in debugging this. While i own some of the underlying dependencies, there are areas of RS i am not familiar with.

I again apologize for the inconvenience this issue has caused all of our users, let us work together in a constructive manner and put CSS modules to bed once and for all. Furthermore, for the heated discussion that has likely spammed innocent bystanders in this thread.

@nikaspran @Pixelatex @lz-allen @Cinamonas, and all others. I will make myself available every night this week to resolve any outstanding issues regarding CSS modules.

[lz-allen]

You don't have to apologize. We also need to thank you for helping solve this problem. I hope this framework is getting better and better.

[ScriptedAlchemy]

@nikaspran new PR opened

Let me know if you have any other contributions.

#870

[tannerlinsley]

With #870 merged, we can now put this to rest 🎉

[ScriptedAlchemy]

anyone who experiences any more issues, please tag @ScriptedAlchemy - Ive tried to cover the scenarios. Remember, im not perfect and usually screw things up the first 2 times 🤣.

Im more than happy to take on challanges and of course fix css modules issues.
Lets all be positive, if you are in frustrating situations - we tottaly empathise!

Thank you all for the patience especially since the issue was opened in May

100% my fault for not stepping in and resolving the issue. No excuses