I’ve got an error while the React App was starting.
I’ve got this error:
<code>Module not found: Error: Can't resolve '@styles/footer.module.css' in 'N:project nameweb2srccomponents'
<code>Module not found: Error: Can't resolve '@styles/footer.module.css' in 'N:project nameweb2srccomponents'
</code>
Module not found: Error: Can't resolve '@styles/footer.module.css' in 'N:project nameweb2srccomponents'
and this too,
<code>TS2307: Cannot find module '@components/dashboard' or its corresponding type declarations.
1 | import App from "./App";
2 | import { Route, Routes } from "react-router-dom";
> 3 | import Dashboard from "@components/dashboard";
| ^^^^^^^^^^^^^^^^^^^^^^^
4 | import Home from "./components/home";
5 | import Product from "./components/product";
6 | import Shop from "./components/shop";
<code>TS2307: Cannot find module '@components/dashboard' or its corresponding type declarations.
1 | import App from "./App";
2 | import { Route, Routes } from "react-router-dom";
> 3 | import Dashboard from "@components/dashboard";
| ^^^^^^^^^^^^^^^^^^^^^^^
4 | import Home from "./components/home";
5 | import Product from "./components/product";
6 | import Shop from "./components/shop";
</code>
TS2307: Cannot find module '@components/dashboard' or its corresponding type declarations.
1 | import App from "./App";
2 | import { Route, Routes } from "react-router-dom";
> 3 | import Dashboard from "@components/dashboard";
| ^^^^^^^^^^^^^^^^^^^^^^^
4 | import Home from "./components/home";
5 | import Product from "./components/product";
6 | import Shop from "./components/shop";
And I’m using extra library: react-app-alias, react-app-rewired,
because I want to import like this:
<code>import ../../styles/footer.module.css // not like this
import "@styles/footer.module.css" // like this
<code>import ../../styles/footer.module.css // not like this
import "@styles/footer.module.css" // like this
</code>
import ../../styles/footer.module.css // not like this
import "@styles/footer.module.css" // like this
That’s my tsconfig.json & tsonfig.paths.json:
"extends": "./tsconfig.paths.json",
"lib": ["dom", "dom.iterable", "esnext"],
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
<code>// tsconfig.json
{
"extends": "./tsconfig.paths.json",
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}
</code>
// tsconfig.json
{
"extends": "./tsconfig.paths.json",
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}
<code>// tsconfig.paths.json
"@styles/*": ["./styles/*"],
"@components/*": ["./components/*"]
<code>// tsconfig.paths.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@styles/*": ["./styles/*"],
"@components/*": ["./components/*"]
}
}
}
</code>
// tsconfig.paths.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@styles/*": ["./styles/*"],
"@components/*": ["./components/*"]
}
}
}
And that’s my react-app-alias config:
<code>// config-overrides.js
const { aliasWebpack, aliasJest, configPaths } = require("react-app-alias");
alias: configPaths("./tsconfig.paths.json"),
tsconfig: "./tsconfig.paths.json",
module.exports = aliasWebpack(options);
module.exports.jest = aliasJest(options);
<code>// config-overrides.js
const { aliasWebpack, aliasJest, configPaths } = require("react-app-alias");
const options = {
alias: configPaths("./tsconfig.paths.json"),
tsconfig: "./tsconfig.paths.json",
baseUrl: "./src",
};
module.exports = aliasWebpack(options);
module.exports.jest = aliasJest(options);
</code>
// config-overrides.js
const { aliasWebpack, aliasJest, configPaths } = require("react-app-alias");
const options = {
alias: configPaths("./tsconfig.paths.json"),
tsconfig: "./tsconfig.paths.json",
baseUrl: "./src",
};
module.exports = aliasWebpack(options);
module.exports.jest = aliasJest(options);
I installed some extra library: react-app-alias, react-app-rewired.
And I started the React App and it started working right away.
But, when I tried to edit all the .css file to .module.css file, this error occured