Module.css not working on docker mode

[iAmKeyvan72]

Hi, I'm using module.css for styling my components and it's working fine when installing OSJS with npm install way. But when i'm using docker to install and run the OSJS, none of my styles are loaded and every class is undefined. I think it's something about webpack that cannot load module.css when installing OSJS with docker. Is there any solution to make it work both on npm and docker mode?

[andersevenrud]

Could you share your setup ? Or maybe show the exact steps on how to reproduce this ?

[iAmKeyvan72]

Sorry, I don't know how to share my setup, but here are the steps to simulate the situation: 1- Install osjs package. 2- Start a react package (like the example https://github.com/os-js/osjs-example-react-application) 3- Create a component named: Test.js 4- Create a file named: Test.module.css in the same directory level as the Test.js component. 5- Write some styles in the module.css file and import all of the in the Test.js component like: import classes from './Test.module.css' 6- Use classnames in the Test.js component and run the project, you'll see your styles won't load and there will be undefined instead of class names. .... I found something to fix this, and it's removing "@osjs/dev-meta": "^1.0.3" from devDependencies of package.json (as mentioned here: https://github.com/os-js/osjs-example-react-application/blob/master/package.json#L31) But I need a solution except removing @osjs/dev-meta from package.json. . Hope I could explain it to you.

[iAmKeyvan72]

@andersevenrud do you think this issue has any solution? or do you need anything about my problem, so i can explain?

[andersevenrud]

Sorry, I totally forgot about this. I've been so busy the last few days!

I'm currently at work, so I cannot look at this now -- but I will once I'm finished.

[andersevenrud]

I was not able to reproduce this. If I console.log the CSS module import I always get a result, no matter if I'm using docker or not :thinking:

[iAmKeyvan72]

Thank you for your respond @andersevenrud. let me explain the issue with images. When I have "@osjs/dev-meta": "^1.0.3" in devDependencies as below:

"devDependencies": {
    "@babel/core": "^7.14.2",
    "@babel/preset-react": "^7.13.13",
    "@osjs/dev-meta": "^1.0.3"
  }

UI of my package after npm install would be like this:

and all classNames that are imported via module.css, would be undefined liked this:

<button class="undefined undefined" type="submit" style="margin-bottom: 20px;">Admin Actions</button>

---

and when I remove it and my devDependencies is as below:

"devDependencies": {
    "@babel/core": "^7.14.2",
    "@babel/preset-react": "^7.13.13",
  }

my UI is in the correct shape as below:

and classes are correctly imported from module.css like this:

<button class="Ui3HpUymWvH8F7O6f_TX1 _23j5nbvpoxZcVcxTO2RNsK" type="submit" style="margin-bottom: 20px;">Admin Actions</button>

So, I hope now i could explain my issue more accurate :D. Any chances?

[andersevenrud]

There's something I don't understand here... how are you able to build your application if you remove the dev-meta that contains all the tools to do this ?

[iAmKeyvan72]

I don't know, i just use npm run build on my project :D Here is my package.json file:

{
  "name": "ProjName",
  "version": "1.1.11",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "eslint": "eslint *.js",
    "build": "webpack",
    "watch": "webpack --watch",
    "stylelint": "stylelint index.scss src/**/*.scss",
    "prepublishOnly": "npm run eslint && npm run stylelint && rm ./dist/* && npm run build"
  },
  "keywords": [
    "osjs"
  ],
  "files": [
    "dist/",
    "server.js",
    "metadata.json"
  ],
  "osjs": {
    "type": "package"
  },
  "eslintConfig": {
    "parser": "babel-eslint",
    "env": {
      "browser": true,
      "node": true
    },
    "parserOptions": {
      "sourceType": "module",
      "ecmaVersion": 2018
    },
    "extends": "@osjs/eslint-config"
  },
  "stylelint": {
    "extends": "@osjs/stylelint-config"
  },
  "babel": {
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
  },
  "dependencies": {
    "@amcharts/amcharts4": "^4.10.18",
    "axios": "^0.21.1",
    "circular-json": "^0.5.9",
    "lodash": "^4.17.21",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-loading": "^2.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.14.2",
    "@babel/preset-react": "^7.13.13",
    "@osjs/dev-meta": "^1.0.3"
  }
}

Maybe it would help?

[andersevenrud]

And for some reason this only happens under Docker, right ?

Could you please explain the process with how you use docker in this context ? I've tried to reproduce this a few times now without any success at all... So I need to be spoon-fed exactly what you're doing here :sweat_smile:

[iAmKeyvan72]

Actually, last time (i mean now!) I tried the normal way. Cloning osjs and use npm method all way. And same result here! Both normal way and docker way, no difference. Let me make a full new project? So I can make an example project with module.css, so you can see my steps and correct any steps you think i'm doing wrong. What do you think? :D

[andersevenrud]

Yes. A minimum reproducible application example would be best :)

[iAmKeyvan72]

You can go to this repo i just made: https://github.com/iAmKeyvan72/osjsPackage clone the package in your osjs and try to build it. compare 2 conditions: 1- when there is "@osjs/dev-meta": "^1.0.3" in the package.json in the devDependencies. 2- when there is no "@osjs/dev-meta": "^1.0.3" in the package.json in the devDependencies. You'll see when you remove "@osjs/dev-meta" styles from module.css would apply. Thank you for your time @andersevenrud

[andersevenrud]

Upgrading dependencies seems to fix the issue :)

npm install --save-dev react@^17 react-dom@^17 @osjs/dev-meta@^2

[andersevenrud]

Which in hindsight makes a bit of sense. The new dev-meta stuff uses a new css pipeline... which also explains why it works when you removed it, because npm goes down in the tree down to your root folder, where there's a newer version installed for the client :)

This is also why I was unable to reproduce... I didn't use the example repo, but did the steps from the manual.

[iAmKeyvan72]

Yes! Thank you for the solution and special thanks for describing it. Problem solved :D

[andersevenrud]

Glad to hear it worked out!