create react app typescript css module not working

Question

When I want to import css module file into a component the compiler shows this error

ERROR in src/layouts/Menu/MenuTop/TabOne.tsx:11:20
TS2307: Cannot find module './TabOne.module.css' or its corresponding type declarations.
  > 11 | import styles from './TabOne.module.css'

But if I change it to something like this:

// @ts-ignore
import styles from './TabOne.module.css'

it works without any problem.

I'm using create-react-app v5 and recently I moved the project from js to ts using steps explained here and I'm not sure if it's related to it or something else is not working as expected

start command:

react-scripts start

related dependencies in package.json file:

"react-scripts": "^5.0.1",
"react": "^18.2.0",

also the tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitAny": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src/",
    "strictNullChecks": true
  },
  "include": ["src"]
}

add your tsconfig.json file to your question ? it should be created automatically for you — monim
– monim, Commented Dec 14, 2022 at 14:26
@monim I added my tsconfig file. it's the default file which create-react-app uses — Amin
– Amin, Commented Dec 14, 2022 at 14:37

monim · Accepted Answer · 2022-12-14 14:57:27Z

4

add declare module "*.module.css"; to declaration.d.ts file in the project root folder .

then Add declaration.d.ts to tsconfig.json by changing "include": ["src"] to "include": ["src", "declaration.d.ts"],

answered Dec 14, 2022 at 14:57

monim

4,4662 gold badges14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pablo Over a year ago

react-scripts has this declaration. Should we duplicate declare statements? Or we can use good old deprecated triple-slash-reference in react-app-env?

PeterLynchJ · Accepted Answer · 2023-03-17 02:38:02Z

0

Faced the same issue here. The problem is caused by react-scripts. Alternatively, to add declare module solution mentioned above, you could consider downgrading react-scripts from 5 to 4. While this may not be an option in your organization, I think it's worth mentioning.

"react-scripts": "5.0.0" ↓
"react-scripts": "4.0.3"

answered Mar 17, 2023 at 2:38

PeterLynchJ

112 bronze badges

Comments

Pablo · Accepted Answer · 2023-04-20 11:44:41Z

0

You need to add typescript triple-slash-reference to any d.ts file inside src/

For some reason cra missed the src/react-app-env.d.ts file with content

/// <reference types="react-scripts" />

answered Apr 20, 2023 at 11:44

Pablo

908 bronze badges

Collectives™ on Stack Overflow

create react app typescript css module not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related