risen228 / craco-alias

A craco plugin for automatic aliases generation for Webpack and Jest
MIT License
109 stars 11 forks source link

Module not found in monorepo #41

Open edubskiy opened 2 years ago

edubskiy commented 2 years ago

I have monorepo with following structure (using lerna):

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?