Can't set up absolute module imports in monorepo

Viewed 34

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!

0 Answers
Related