Turborepo — библиотека, использующая другую библиотеку — вам может понадобиться соответствующий загрузчик для обработки файлов этого типа.

Приложение для воспроизведения: https://github.com/uriklar/turborepo-lib-dep-lib-repro

Я использую базовый пример Turborepo (приложение nextjs + библиотека пользовательского интерфейса)

Я хочу добавить дополнительную библиотеку пользовательского интерфейса и чтобы моя библиотека пользовательского интерфейса зависела от нее.

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

я создал anotheruiбиблиотека внутри каталога пакетов и добавил ее как зависимость, например так:

      {
  "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приложение (которое потребляет Buttonот ui) Я получаю следующую ошибку:

      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:

Мой вопрос:
возможно ли, чтобы одна библиотека зависела от другой библиотеки из того же монорепозитория?

Спасибо!

Источник

2 ответа

Решение найдено. На самом деле это было связано с Next.js.
Turborepo уже использует модуль под названием «next-transpile-modules», и в моем next.config.jsфайл у меня уже была эта строка:

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

Поэтому я просто добавил "anotherui"к массиву, и это сработало

Источник

Next.js 13

Просто добавьте эту строку и включите любые модули, которые вы хотите скомпилировать компилятором Next, в свойnext.config.mjs:

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

Документация по транспиляции следующего модуля

Источник
Другие вопросы по тегам