Hashnode / Hashnode/mern-starter

Issues composing CSS Modules

Open
#202 1 comment 7 reactions 0 assignees View on GitHub
bug V2.6.0
Dominant language
JavaScript
Stars
5.1k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Hey guys, awesome work on the boilerplate :+1:

However there are a few issues with using composes and CSS modules.

1) [Issue 193](https://github.com/Hashnode/mern-starter/issues/193) is still valid.
Repro:
0) Node 6.2.2 + npm 3.9.5 + Windows (I only have windows to test on at the moment)
1) clone current repo and run npm install
2) Move the contents of the `.container` class from `client/modules/App.css` to `client/modules/test.css` as `.test {...}` and change `client/modules/App.css` to `.container { composes: test from "./test.css" }`
3) npm run start - same error as issue 193 regarding `__webpack_require__` appears
However...
If you start the project using the code from the repo and then make the above changes, it works after the hot module reloader has done it's thing, but it won't work if you stop and restart.

This seems like a recent issue as our project that's based off a slightly older version of Mern doesn't display this issue. However it was present when using the latest Mern repo to get this bug report together for the issues below.

2) import vs requires for css
After installing the new extract-text-webpack-plugin and making the change from `entry` to `hasRuntime()` in chunk-manifest-webpack-plugin, trying to run the bs command results in `Module parse failed` for each css import by a js file.

Changing the imports to `require()` fixes this error, but seems like a step back.

3) After changing css imports to requires, running bs seems to build fine, but the built app won't start. You get errors like:

```
"container": "App__container__15uqt " + __webpack_require__(0).locals["test"] + ""
^
TypeError: Cannot read property 'test' of undefined
at Object. (C:\ctm\mern-starter-master\dist\server.bundle.js:1057:72)
```

The production css seems to build correctly, but instead of adding the generated css classname for `.test` in the server bundle it's trying to look it up from a module - in this case `__webpack_require__(0)` is react.

This is the error I was initially going to raise, the others appeared whilst trying to replicate the issue on the lasted Mern repo. Any help or guidance that anyone can provide will be most appreciated :+1:

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.