ReactJS: Cannot find module './App.module.css' or its corresponding type declarations

Question

I opened my old project today and saw these strange warnings:

ERROR in src/App.tsx:13:17
TS2307: Cannot find module './App.module.css' or its corresponding type declarations.
    11 | import { Layout, Breadcrumb } from 'antd'
    12 | import Header from './components/Header/Header'
  > 13 | import css from './App.module.css'
       |                 ^^^^^^^^^^^^^^^^^^
    14 | import { ROUTES } from './constants/routes'
    15 | import Menu from './components/Menu'
    16 |

ERROR in src/components/common/FormsControls/FormsControls.tsx:2:17
TS2307: Cannot find module './FormsControls.module.css' or its corresponding type declarations.
    1 | import { FC, MouseEvent } from 'react'
  > 2 | import css from './FormsControls.module.css'
      |                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 | import commonCss from '../styles.module.css'
    4 | import { Field, WrappedFieldProps } from 'redux-form'
    5 | import cn from 'classnames'

There are also a lot of them with file formats svg, png and others. All my packages are now the most recent version. There was no such problem before, can anyone help solve this without having to struggle with webpack?

Eduard · Accepted Answer · 2021-12-26 10:11:19Z

1

Create a file called declarations.d.ts (you can name it anything you want)
Sometimes it is mandatory to reload your IDE but not always.

// declarations.d.ts
declare module '*.css';
declare module '*.scss';
declare module '*.svg';
// etc ...

TypeScript does not know that there are files other than .ts or .tsx hence it will complain if an import has an unknown file suffix, so in this case, we explicitly tell the compiler that we mean to load a module that can have the following extensions.

answered Dec 26, 2021 at 10:11

Eduard

1,3848 silver badges14 bronze badges

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

2 Comments

hindus Over a year ago

I put this file in the project and restart folder but I still see errors in the console

Eduard Over a year ago

May I see the structure of your folders, please?

D_Gorbachev · Accepted Answer · 2022-05-07 12:29:11Z

0

In my React app, created with CRA, I had to add in react-app-env.d.ts:

declare module '*.css';

Adding this declaration in separate file, like suggested above, did not work.

answered May 7, 2022 at 12:29

D_Gorbachev

315 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

ReactJS: Cannot find module './App.module.css' or its corresponding type declarations

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related