Search code examples
next.jsturborepo

Including local package in webpack build (turborepo)

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.

Solution

  • 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.