create react app typescript css module not working-CodePudding

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"]
}

CodePudding user response：

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"],