Including local package in webpack build (turborepo)

user_340688 0
Viewed 4739

I have two packages ui and app in a "monorepo" using turborepo.

I have the ui repo with .tsx files and it's not being built, it's package.json main is a typescript file.

However when running nextjs I get an error at the import from the ui main file.

Is it possible to include this node_module from nextjs perspective? When looking at config.module.rule I can't find any rules for typescript files. I'm not sure how typescript config for nextjs files.

turborepo next.js
3 Answers

add this to your app's package.json should resolve it:

"bundledDependencies": [
  "ui"
]
user_178250020

The turbo-repo example is using next-transpile-modules in the apps to get Next to transpile these package dependencies that do not have a build step:

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

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

From this article by the creator of Turbo Repo, Jared Palmer:

[To] do this, this package can then be used without project references or a TypeScript build step (either via tsc or esbuild etc) as long as you adhere to 2 rules:

  1. The consuming application of an internal package must transpile and typecheck it.
  2. You should never publish an internal package to NPM. ...

**Next.js

If you use Next.js, you can satisfy these constraints with the next-transpile-modules plugin which will tell Next.js to run certain dependencies through its Webpack/Babel/TypeScript pipelines.

So make sure you're meeting the constraints outlined in the previous excerpt. Since you're using Next, check your next.config.js and confirm that you're using next-transpile-modules for your internal dependencies.

user_5717240

Take a look at the default project of Turborepo as it is explained here: Getting Started. The repository itself can be found here: GitHub.

This project comes with 3 different packages and two plain NextJS apps (docs/web) that use a (Button-)component from the UI repository.
Use this project to understand the structure of a Turborepo and adjust it to your needs.

I did exactly what I described above and my NextJs apps just work fine sharing (tsx-)components from the UI package.

user_35976140
Related