Skip to content
This repository has been archived by the owner on May 19, 2022. It is now read-only.

Module not found in monorepo #41

Open
edubskiy opened this issue Oct 6, 2021 · 0 comments
Open

Module not found in monorepo #41

edubskiy opened this issue Oct 6, 2021 · 0 comments

Comments

@edubskiy
Copy link

edubskiy commented Oct 6, 2021

I have monorepo with following structure (using lerna):

  • apps
    |_ api // nodejs
    |_ web // react app
  • shared
    |_ common // common code between react and nodejs
    |_ components // common components between react apps

at the root of monorepo I have tsconfig.paths.json:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@shared/common/*": ["./shared/common/src/*"],
      "@shared/components/*": ["./shared/components/src/*"],
      "@api/*": ["./apps/api/src/*"],
      "@web/*": ["./apps/web/src/*"]
    }
  }
}

and apps/web/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"
  ]
}

and also apps/web/craco.config.js

const CracoAlias = require('craco-alias');
const path = require('path');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        // baseUrl SHOULD be specified
        // plugin does not take it from tsconfig
        baseUrl: './src',
        // tsConfigPath should point to the file where "baseUrl" and "paths" are specified
        tsConfigPath: '../../tsconfig.paths.json',
      },
    },
  ],
};

I have an import in apps/web/src/App.tsx:

`import '@web/common/axiosSetup';`

The file axiosSetup is located inside apps/web/src/common/axiosSetup.ts

And when I run I get following error:

@program-studio/web: > @program-studio/web@0.0.1 start
@program-studio/web: > craco start
@program-studio/web: The following changes are being made to your tsconfig.json file:
@program-studio/web:   - compilerOptions.paths must not be set (aliased imports are not supported)
@program-studio/web: [HPM] Proxy created: /  -> 
@program-studio/web: [HPM] Proxy created: /  -> 
@program-studio/web: ℹ 「wds」: Project is running at 
@program-studio/web: ℹ 「wds」: webpack output is served from 
@program-studio/web: ℹ 「wds」: Content not from webpack is served from 
@program-studio/web: ℹ 「wds」: 404s will fallback to /
@program-studio/web: Starting the development server...

@program-studio/web: Failed to compile.
@program-studio/web: ./src/App.tsx
@program-studio/web: Module not found: Can't resolve '@web/common/axiosSetup' in '/Users/edubskiy/Dev/work/program-studio/apps/web/src'

So I am trying to import code inside my app/web/src folder with absolute path using alias

Please tell me what do I do wrong and how do fix import?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant