next.jsnpm-linkturbopack

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


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

The structure is:

my-package@1.2.3 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.


Solution

  • 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