NX Based React Project is not loading internal libraries

153 views Asked by At

I have a project that was worked by someone else on NX 15 I tried to run it but had many issues So I created a new NX 17 Project and migrated all the code to the new code base (NX 17). But when I am running it, I'm getting Error: The following dependencies are imported but could not be resolved I tried to check docs, Stack Overflow & git issues, but was not able to find the solution for the problem

Please Help Me: If you need git Repo, I will provide it

Total Apps 3 based & Libraries 5 on React

Basically, imports from libs to libs imports are working fine similarly imports apps to apps imports are working fine but unable to call libs in apps and apps in libs

able to import from import { useResetPasswordStore } from '@istekhara/store' Full Error Message importing from subdirectories

Error: The following dependencies are imported but could not be resolved:

  @istekhara/ui/components (imported by /home/abbasmashaddy72/Documents/Sites/Frontend/istekhara/apps/admin/src/screens/dashboard/shared/data-grid/index.tsx)
  @istekhara/ui/layout (imported by /home/abbasmashaddy72/Documents/Sites/Frontend/istekhara/apps/admin/src/helper/layout/index.tsx)
  @istekhara/ui/forgot-password-page (imported by /home/abbasmashaddy72/Documents/Sites/Frontend/istekhara/apps/admin/src/helper/router/index.tsx)
  @istekhara/ui/reset-password-page (imported by /home/abbasmashaddy72/Documents/Sites/Frontend/istekhara/apps/admin/src/helper/router/index.tsx)
  @istekhara/ui/not-found-page (imported by /home/abbasmashaddy72/Documents/Sites/Frontend/istekhara/apps/admin/src/screens/dashboard/router.tsx)
  @istekhara/ui/icons (imported by /home/abbasmashaddy72/Documents/Sites/Frontend/istekhara/apps/admin/src/screens/dashboard/views/users/index.tsx)
  @istekhara/ui/wrapper (imported by /home/abbasmashaddy72/Documents/Sites/Frontend/istekhara/apps/admin/src/screens/dashboard/views/home/index.tsx)
  @istekhara/ui/styled (imported by /home/abbasmashaddy72/Documents/Sites/Frontend/istekhara/apps/admin/src/screens/dashboard/shared/DashboardNavigation/index.tsx)
  @istekhara/ui/wrapper/QueryWrapper

My tsconfig.base.json

I tried to use /* but didnot worked for me

{
  "compileOnSave": false,
  "compilerOptions": {
    "noImplicitAny":false,
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "jsx": "react",
    "module": "esnext",
    "lib": [
      "es2020",
      "dom"
    ],
    "skipLibCheck": false,
    "skipDefaultLibCheck": false,
    "baseUrl": ".",
    "paths": {
      "@istekhara/common": [
        "libs/common/src/index.ts"
      ],
      "@istekhara/hooks": [
        "libs/hooks/src/index.ts"
      ],
      "@istekhara/service": [
        "libs/service/src/index.ts"
      ],
      "@istekhara/store": [
        "libs/store/src/index.ts"
      ],
      "@istekhara/theme": [
        "libs/theme/src/index.ts"
      ],
      "@istekhara/ui": [
        "libs/ui/src/index.ts"
      ],
      "@istekhara/common/*": [
        "libs/common/src/*"
      ],
      "@istekhara/hooks/*": [
        "libs/hooks/src/*"
      ],
      "@istekhara/service/*": [
        "libs/service/src/*"
      ],
      "@istekhara/store/*": [
        "libs/store/src/*"
      ],
      "@istekhara/theme/*": [
        "libs/theme/src/*"
      ],
      "@istekhara/ui/*": [
        "libs/ui/src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "tmp"
  ]
}

Apps tsconfig.app.json Similar for all 3 projects

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "types": [
      "node",
      "@nx/react/typings/cssmodule.d.ts",
      "@nx/react/typings/image.d.ts",
      "vite/client"
    ],
    "baseUrl": ".",
    "paths": {
      "@alim/*": ["src/*"],
      "@istekhara/common": ["../../libs/common/src/index.ts"],
      "@istekhara/hooks": ["../../libs/hooks/src/index.ts"],
      "@istekhara/service": ["../../libs/service/src/index.ts"],
      "@istekhara/store": ["../../libs/store/src/index.ts"],
      "@istekhara/theme": ["../../libs/theme/src/index.ts"],
      "@istekhara/ui": ["../../libs/ui/src/index.ts"]
    }
  },
  "exclude": [
    "src/**/*.spec.ts",
    "src/**/*.test.ts",
    "src/**/*.spec.tsx",
    "src/**/*.test.tsx",
    "src/**/*.spec.js",
    "src/**/*.test.js",
    "src/**/*.spec.jsx",
    "src/**/*.test.jsx"
  ],
  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
}

0

There are 0 answers