Error While Configuring CSS Modules with Webpack

Error using css modules in typescript react with webpack config

Regarding to the typing, you can fix by removing namespace import since generated typing is now exporting default value. You just simply import as default import:

import styles from "./App.css";

<h3 className={styles["background"]}>CSS Here</h3>

Plus, in order to have css getting appended in your document, you might have to use style-loader.

For the parsing error, it's most likely related to your linter, so try to have a look the way you set it up.

How can I import CSS Modules in a TypeScript file?

import * as styles from "module-path"; is semantically different to import styles from "module-path";. Basically don't assume these non-javascript made-up modules follow any advanced module rules and always default import them.

Related Topics