CSS modules not working in Codesandbox - can't find files even though they exist

Admin 1
Viewed 926

I'm trying to build a project and I just moved my code from VSCode to Codesandbox. I must mention that the code was working fine in VSC but for some reason it's not working in Codesandbox - the CSS modules can't be found. I am thinking I am maybe missing something in my setup since I looked at other examples and the code seems identical (the imports). The error in getting for all the files is:

Cannot find module './Example.module.css' or its corresponding type declarations.

The complete code is here:

https://codesandbox.io/s/burger-builder-project-173uw?file=/src/Components/Layout/Layout.tsx

Does anyone have any idea what could be wrong? Thank you.

codesandbox typescript reactjs javascript
4 Answers

To get rid of the error you need to create a Typescript Declaration file for *.css on the root folder and include it on the tsconfig.json. Take a look on the changes below:

module.css.d.ts

declare module "*.module.css";

tsconfig.json

{
    "include": [
        "./src/*",
        "./module.css.d.ts"
    ],
    "compilerOptions": {
        "strict": true,
        "esModuleInterop": true,
        "lib": [
            "dom",
            "es2015"
        ],
        "jsx": "react"
    }
}
user_28283410

I found one way to fix this (that's how I work with CSS files):

// Layout.tsx

import React from "react";
import BurgerBuilder from "../../ContainerBurgerBuilder";

// CSS
import "./Layout.module.css";

And then in your render method:

render() {
   return (
      <div className="Content">
         <BurgerBuilder/>
      </div>

   );
}
user_96042210

enable javascript in your html file, then i think it will work

user_159632370

add "Typescript Plugin Css Modules" from your dependency list in codesandbox.io

enter image description here

enter image description here

user_191369730
Related