![](/img/trans.png)
[英]You may need an appropriate loader to handle this file type - Angular 4 with React
[英]Turborepo - library consuming another library - You may need an appropriate loader to handle this file type
复制应用程序: https://github.com/uriklar/turborepo-lib-dep-lib-repro
我正在使用 Turborepo 的基本示例(nextjs app + 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/></>;
};
我在 packages 目录中创建了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
应用程序(从ui
使用Button
)时,我收到以下错误:
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 中的另一个库?
谢谢!
找到了解决方案。 它实际上与 Next.js 有关。
Turborepo 已经使用了一个名为“next-transpile-modules”的模块,在我的next.config.js
文件中,我已经有了这一行:
const withTM = require("next-transpile-modules")(["ui"]);
所以我只是在数组中添加了"anotherui"
并且它起作用了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.