How to use npm link dependency with Next.js Turbopack?

Question

I'm developing a package, which I also need to test with local next.js project.

The structure is:

[email protected] C:\Users\mist\code\my-package
├── package.json
├── src
├── example/
    ├── package.json
    ├── app/
    ├── next.config.ts

I did run npm link ../ --save in the /example directory. The /example/package.json now contains:

  "dependencies": {
    "my-package": "file:..",
  }

When I run the example app with next dev --turbo I get the error:

./app/test/action.ts:3:1

Module not found: Can't resolve 'my-package'
  1 | "use server";
  2 |
> 3 | import { test } from "my-package";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4 | import { z } from "zod";
  5 |
 

How can I use a local package with the Next.js Turbopack? The non-turbo mode works for me though, so the link setup is correct.

Answer 1

Per this GitHub issue:

Turbopack doesn't support reading files (or symlinks) outside your project directory.

There is a workaround, which is setting experimental.outputFileTracingRoot in next.config.js

In your case, set the experimental.outputFileTracingRoot to path.join(__dirname, "../") to include files from the parent directory.

// C:\Users\mist\code\my-package\example\next.config.ts
import type { NextConfig } from "next";
import path from "path";

const nextConfig: NextConfig = {
  // existing config here
  outputFileTracingRoot: path.join(__dirname, "../"),
}

export default nextConfig;

Reference: next.config.js: output | Next.js