Включение локального пакета в сборку webpack (турборепо)

У меня есть два пакета и app в «монорепо» с использованием турборепо.

У меня репо пользовательского интерфейса с .tsx файлы, и он не создается, это package.json main файл машинописного текста.

Однако при запуске я получаю сообщение об ошибке при импорте из ui основной файл.

Можно ли включить это node_module от nextjsперспектива? Глядя на config.module.ruleЯ не могу найти никаких правил для файлов машинописного текста. Я не уверен, как настроить машинный код для файлов nextjs.

4 ответа

Пример турборепозитория используется в приложениях, чтобы получить Next для переноса этих зависимостей пакета, которые не имеют шага сборки:

      // in next.config.js
const withTM = require("next-transpile-modules")(["ui"]);

module.exports = withTM({
  reactStrictMode: true,
});

Из этой статьи создателя Turbo Repo Джареда Палмера:

[Чтобы] сделать это, этот пакет можно использовать без ссылок на проект или шага сборки TypeScript (через tsc или esbuild и т. д.), если вы придерживаетесь 2 правил:

  1. Приложение, использующее внутренний пакет, должно транспилировать и проверить его тип.
  2. Вы никогда не должны публиковать внутренний пакет в NPM. ...

**Next.js

Если вы используете Next.js, вы можете удовлетворить эти ограничения с помощью плагина next-transpile-modules, который скажет Next.js запускать определенные зависимости через его пайплайны Webpack/Babel/TypeScript.

Поэтому убедитесь, что вы соблюдаете ограничения, изложенные в предыдущем отрывке. Поскольку вы используете Next, проверьте next.config.jsи подтвердите, что используете next-transpile-modulesдля ваших внутренних зависимостей.

добавьте это в package.json вашего приложения, чтобы решить эту проблему:

      "bundledDependencies": [
  "ui"
]

Взгляните на проект Turborepo по умолчанию, как он объясняется здесь: Начало работы . Сам репозиторий можно найти здесь: GitHub.

Этот проект поставляется с 3 различными пакетами и двумя простыми приложениями NextJS (docs/web), которые используют компонент (кнопку) из репозитория пользовательского интерфейса.
Используйте этот проект, чтобы понять структуру Turborepo и настроить ее под свои нужды.

Я сделал именно то, что описал выше, и мои приложения NextJs просто отлично работают, делясь (tsx-) компонентами из пакета пользовательского интерфейса.

Начиная с Next.js 13, вы можете просто сделать следующее:

      // next.config.js

module.exports = {
  transpilePackages: ['ui'],
}

Документ Next.js

Другие вопросы по тегам