I'm trying to set up absolute imports in react/typescript project, but can't find a solution for my case. Always get same error:
ERROR in ./src/app/App.tsx 18:14-37
Module not found: Error: Can't resolve 'common/hooks' in '/home/artem/Desktop/drum-school/webapp/src/app'
VSCode validation doesn't highlight any errors with my imports, but when it comes to compiling this error occurs. I tried different variations of tsconfig.json, but error remains. Here are my current config:
{
"compilerOptions":{
"jsx": "react-jsx",
"module":"CommonJS",
"moduleResolution":"node",
"noImplicitAny":true,
"outDir":"./public/",
"preserveConstEnums":true,
"removeComments":true,
"sourceMap":true,
"target":"es5",
"baseUrl": "src",
},
"include": ["src"]
}
I also tried "baseUrl": "./src", "baseUrl": "./", "baseUrl": "." with paths, but still no effect.
One of the imports:
import { useTypedSelector } from "common/hooks";
common/hooks.ts:
import { useDispatch, useSelector } from "react-redux";
import type { TypedUseSelectorHook } from "react-redux";
import type { RootState, AppDispatch } from "app/store";
const useTypedDispatch = () => useDispatch<AppDispatch>();
const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;
export { useTypedDispatch, useTypedSelector };
I supposed that this error may occur because our team is using monorepo. Here is a file structure:
├── backend
│ ├── backend-files
│ └── backend-files
│
└── webapp
├── package.json
├── tsconfig.json
└── src
├── app
│ ├──App.tsx (import is here)
│ └──otherFiles
├── common
│ ├──hooks.ts (export is here)
│ └──otherFiles
├── otherFiles
└── index.tsx
I will be grateful if you explain what I am doing wrong and show how to solve the problem. Thanks!