Turborepo - 消耗另一个库的库 - 您可能需要适当的加载器来处理此文件类型

Question

复制应用程序：https://github.com/uriklar/turborepo-lib-dep-lib-repro

我正在使用 Turborepo 的基本示例（nextjs 应用程序 + ui 库）

我想添加一个额外的 ui 库并让我的 ui 库依赖它。

// packages/ui/Button.tsx
import * as React from "react";
import { Button as AnotherButton} from "anotherui"
export const Button = () => {
  return <><button>Boop</button><AnotherButton/></>;
};

我anotherui在包目录中创建了库并将其添加为依赖项，ui如下所示：

{
  "name": "ui",
  "version": "0.0.0",
  "main": "./index.tsx",
  "types": "./index.tsx",
  "license": "MIT",
  "dependencies": {
    "anotherui": "workspace:*"
  },
  "devDependencies": {
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "tsconfig": "workspace:*",
    "config": "workspace:*",
    "typescript": "^4.5.3"
  }
}

当我尝试构建应用程序（从web消耗）时，我收到以下错误：Buttonui

web:build: Failed to compile.
web:build: 
web:build: ../../packages/anotherui/Button.tsx
web:build: Module parse failed: Unexpected token (3:9)
web:build: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
web:build: | import * as React from "react";
web:build: | export const Button = () => {
web:build: >   return <button>Boop</button>;
web:build: | };
web:build: | 
web:build: 
web:build: Import trace for requested module:
web:build: ../../packages/anotherui/index.tsx
web:build: ../../packages/ui/Button.tsx
web:build: ../../packages/ui/index.tsx
web:build: ./pages/index.tsx
web:build: 

我的问题是：
是否可以让一个库依赖于同一 monorepo 中的另一个库？

谢谢！

Answer 1

找到了解决方案。它实际上与 Next.js 有关。
Turborepo 已经使用了一个名为“next-transpile-modules”的模块，并且在我的next.config.js文件中我已经有了这一行：

const withTM = require("next-transpile-modules")(["ui"]);

所以我只是添加"anotherui"到数组中并且它起作用了

Answer 2

Next.js 13

只需添加此行并将您想要由 Next Compiler 编译的任何模块包含在您的next.config.mjs：

/** @type {import("next").NextConfig} */
const config = {
  // ...
  + transpilePackages: ['ui']
};

下一个模块转译文档