Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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'
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?
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.
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.
                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.
– Community
                May 9, 2022 at 18:45
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.