Is there a way to use modular css in React TSX? [duplicate] - css

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?

Answer 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.

Answer 2

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.