npm link / yarn link - recompile pages after updating module

[dkirchhof]

Run next info (available from version 12.0.8 and up)

No response

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

17.3.0

What browser are you using?

Vivaldi

What operating system are you using?

Linux

How are you deploying your application?

next dev

Describe the Bug

Hey,
I'm developing a library for nextjs which includes some api functions and also some ui components (react).
For testing purposes I have a nextjs project where i'm linking this library via yarn link.
Unfortunately changes in the library don't trigger a recompilation of eg. a page where I'm using one of the components (it's .
Neither the HMR nor a manual reload will show the new changes. Actually I have to stop the next dev process, remove the .next folder and start next dev again.

I don't know if it's a setting in webpack / swc / next. Is there a build cache or something I can disable?

Expected Behavior

Changes in node_modules should reflect in compiled pages.

To Reproduce

1. create a nextjs project
2. import a ui library
3. use it on some pages
4. make temporary changes in the ui library (just directly in node_modules//<component.js>?!)
5. check if changes are visible on these pages

[william-will-angi]

Any chance you found a solution for this in the past year?

[jestersoftware]

I have to do the exact same thing as described by @dkirchhof. Would love any suggestions on how to make it easier.

[nbkhope]

Also interested to know your solution. I hate to keep restarting everything, removing .next, etc.

[dkirchhof]

Sorry, I stopped working on this project so I never found a solution. Maybe you can check out the suggestion of @unleashit?

[unleashit]

Interesting, I have a similar setup without the issue. Only difference is instead of npm link, I'm just doing an import through the file system like: "the-library": "file:../../the_library",. The other possible difference is it's basically a utility function (not components or API routes).

In the library I go tsc --watch, and most changes reflect right away (except types, which I think might be because --watch might not be emitting them, would have to check).

[krckyboy]

I can confirm that this works, even if you have more complex logic (server components, for example).

It might be useful to point out that I moved the transpiling part to NextJS, so it can be useful for local development:

next.config.js

  transpilePackages: ['the_library']

Also, if you want to make this work with Docker, you would do it via volumes, such as:

docker-compose.yml

    volumes:
      - ../the_library:/var/www/main_project/the_library

package.json

    "the_library": "file:the_library"

[marlonmarcello]

This is still an issue.
You have to nuke the .next/ directory and start the local server again every time you change the linked packages.

[Bitnagar]

I still have to do npm run build in the linked package, and then the next.js project recompiles.

[arindam1997007]

This solution worked for me - webpack/webpack#11612 (comment)

unmanagedPaths if not supported in your webpack version, then use managedPaths

In next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, { dev }) => {
    if (dev) {
      config.watchOptions = {
        followSymlinks: true,
      };
      config.snapshot = {
        unmanagedPaths: [
          /^(.+?[\\/]node_modules[\\/](@personal[\\/]project1)(@.+?[\\/])?.+?)[\\/]/,
        ],
      };
    }
    return config;
  },
};

export default nextConfig;

One more thing to note - I am using yalc to link the package locally.