using babel-plugin-css-modules-transform with ssr not working

simhox commented 4 years ago

hi im using ssr and want to use babel-plugin-cs-modules transform to display my css my code is : webpackconfig.js:

module: {
        rules: [
            {
                test:/\.css$/,
                use: [
                    "style-loader",
                    {
                      loader: "css-loader",
                      options: {
                        modules: true,
                        context: "/",
                        localIdentName: '[name]__[local]___[hash:base64:5]'
                      }
                    }
                  ]
            }
        ],
    },

babelrc:


"plugins": [
    "transform-decorators-legacy",
    "transform-object-rest-spread",
    [
      "css-modules-transform",
      {

        "generateScopedName": "[name]__[local]___[hash:base64:5]",
        "rootDir": "/",
        "extensions": [".css"]
      }
    ]
  ]

app.css: div { background-color:#99cc00; padding:10px; } App.js: require('./src/styles/app.css'); css loader version is :

"css-loader": "^2.0.2",

babel-plugin-css-modules-transform version is : "babel-plugin-css-modules-transform": "^1.6.2",

style loader version: "style-loader": "^1.0.0",

am i doing something wrong or is there a versioning issue?

let me know if you need more information. thanks in advance

blopa commented 3 years ago

Were you able to solve this?

suhanw commented 3 years ago

@simhox are you getting an error like this?

Warning: Prop `className` did not match. Server: "account-page_327l2" Client: "account-page_aqoHO"

Seems like classNames haven't been matching since version 2 and newer (https://github.com/michalkvasnicak/babel-plugin-css-modules-transform/issues/103)

michalkvasnicak / babel-plugin-css-modules-transform

using babel-plugin-css-modules-transform with ssr not working #106