javascript - How to configure module aliases in a monorepo bootstrapped with Turborepo? - Stack Overflow

admin管理员组

文章数量:1426855

I am attempting to migrate several repositories to the monorepo architecture and I am currently working on a POC bootstrapped with Turborepo.

The issue I am seeing is that ts module aliasing isn't configured properly. I currently have a single ui package and I am trying to export a button ponent from the index.tsx like so (notice, VS code not plaining, it thinks it can resolve the module):

However, when I attempt to build my application I see that the module is not in fact resolved:

Module not found: Can't resolve '@/ponents/Button'

I am at a loss here, does anyone know how to properly configure module aliases with turbo repo? Below is the tsconfig.json:

{
  "extends": "tsconfig/react-library.json",
  "include": ["."],
  "exclude": ["dist", "build", "node_modules"],
  "pilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/ponents/*": ["./ponents/*"]
    }
  }
}

I am attempting to migrate several repositories to the monorepo architecture and I am currently working on a POC bootstrapped with Turborepo.

The issue I am seeing is that ts module aliasing isn't configured properly. I currently have a single ui package and I am trying to export a button ponent from the index.tsx like so (notice, VS code not plaining, it thinks it can resolve the module):

However, when I attempt to build my application I see that the module is not in fact resolved:

Module not found: Can't resolve '@/ponents/Button'

I am at a loss here, does anyone know how to properly configure module aliases with turbo repo? Below is the tsconfig.json:

{
  "extends": "tsconfig/react-library.json",
  "include": ["."],
  "exclude": ["dist", "build", "node_modules"],
  "pilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/ponents/*": ["./ponents/*"]
    }
  }
}

• javascript
• node.js
• reactjs
• next.js
• turborepo

Share Improve this question Follow edited Feb 2, 2023 at 8:10 Mayank Kumar Chaudhari 18.9k1313 gold badges7272 silver badges155155 bronze badges asked Feb 1, 2022 at 21:20 Logan MurphyLogan Murphy 41344 silver badges1919 bronze badges 2

• 3 any updates on this? – untitled Commented Sep 23, 2022 at 21:37
• Look on this thread. You will have to do a little bit of trial and error to get this right. But this answer will get us in the right direction. – Mayank Kumar Chaudhari Commented Dec 2, 2022 at 4:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You need to setup the tsconfig.json inside both packages/ui and root.

1. Inside the packages/ui you have to set like the paths like this;

// root/packages/ui -> tsconfig.json
{
  "extends": "tsconfig/react-library.json",
  "include": ["."],
  "exclude": ["dist", "build", "node_modules"],
  "pilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/ponents/*": ["ponents/*"] // Don't use "./ponents/*", instead like this: "ponents/*" 
    }
  }
}

2. tsconfig.json in root also.

// root -> tsconfig.json
{
  "extends": "your_default_extends",
  "pilerOptions": {
    "plugins": [{your_plugins}],
    "paths": {
      "@*": ["./packages/ui/*"]
    }
  },
  "include": ["your_include"],
  "exclude": ["node_modules"]
}

If you have another project wanna using import @ alias as well, just add the route to the folder inside root tsconfig.json too.

// root -> tsconfig.json
{
  "extends": "your_default_extends",
  "pilerOptions": {
    "plugins": [{your_plugins}],
    "paths": {
      "@*": ["./packages/ui/*", "./apps/some_project/src/*"] // here
    }
  },
  "include": ["your_include"],
  "exclude": ["node_modules"]
}

本文标签： javascriptHow to configure module aliases in a monorepo bootstrapped with TurborepoStack Overflow