4

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.

Improve this question
1

4 Answers 4

Reset to default
5

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"
    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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>

   );
}
Improve this answer

2 Comments

My code, surprisingly, seems to be working, I just can't get rid of the error. Your solution breaks the whole app. Thank you.
I am sorry to hear that. I hope you will find a more suitable solution soon.
0

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

Improve this answer

1 Comment

It's a comment.
0

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

enter image description here

enter image description here

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.