At my workplace, we have a React project using Create React App (CRA). I recently bought a new computer with Windows 11 Home (previously, I was using another computer with Windows 11 Pro).
On my new computer, I am getting the following error when trying to run yarn start:
./src/components/EnvGroupAnalysis/index.tsx
Module not found: Can't resolve './src/assets/css/ReactTags.css' in 'C:\Users\my-user\front\src\components\EnvGroupAnalysis'
In the file src/components/EnvGroupAnalysis/index.tsx, I have the following import:
import '~/assets/css/ReactTags.css';
I know that if I change the import to use a relative path instead of '~/', the error goes away. However, the project is large, with thousands of imports using '~/', so I can't just change them all manually.
On my old computer and on the environments of 12 other developers, everything works fine without issues.
Here’s my tsconfig.json:
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"allowJs": false,
"strict": true,
"noImplicitAny": false,
"suppressExcessPropertyErrors": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "src"
},
"include": ["src"],
"extends": "./tsconfig.absolute-paths.json"
}
And here’s the ./tsconfig.absolute-paths.json file:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"~/*": ["*"]
}
}
}
Could anyone help me figure out why the imports using '~/' are not being resolved properly on my new laptop, even though the configuration works fine for everyone else? Any help would be greatly appreciated!