Hot reload or any changes do not reflect when component is built into node_modules folder

[brandoncollins7]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 16.13.2
npm: N/A
Yarn: N/A
pnpm: 7.1.2
Relevant packages:
next: 12.1.6
react: 18.1.0
react-dom: 18.1.0

What browser are you using? (if relevant)

not relevant

How are you deploying your application? (if relevant)

No response

Describe the Bug

I am using bit.dev to develop the components for my application. The way it works is by compiling components into node_modules so that they can be imported in source file via the syntax: @company/scope.test. This seems to be very similar to how npm link works for importing libraries (which seems to have the same problem)

So any component which is built this way, when I make changes it is not reflected in the node all - Even though nextjs appears to detect the change as I see it recompile in the logs when I save. Even stopping and restarting the server does not reflect my change.
It appears I need to delete the .next folder and then restart the server and I can see my change.

This obviously is not very efficient for development, seems like a bug.

Expected Behavior

Running application should immediately reflect changes to updated components bia bit.dev or npm link.

To Reproduce

Reference a component in the node_modules folder, update it and hit save. See nextjs notices the change as this event fires (event - compiled client and server successfully in 113 ms (262 modules)), but change is not reflected in application until delete the .next folder and restarting the application.

[jankaifer]

We can't afford to watch node_modules there are just too many files.

We will track this as a feature request.

Note about that refresh when you edit stuff:
I think dev refreshes because your scripts might be reading some config file in the project that we don't know about. So that your code could pick it up. I might be wrong here.

[andersekdahl]

We have quite a few internal npm packages and it's a bit of a pain to work with because of the PR -> merge -> release -> update version in consumer application cycle which is very slow and inefficient.

We started looking into yarn link but that's really tricky to work with together with TypeScript since you'll most likely end up with different versions of types to eg React and get errors because of that.

So we started looking at setting up a watch and copy files into node_modules of our Next apps, but quickly realized that Next caches node_modules very hard as mentioned here.

Is there any way of opting out of this hard cache? Disabling it completely for all packages would even be worth it for us. I'd be ready to jump through any hoops needed to get that working.

[andersekdahl]

Working on a possible solution for this which means changing the webpack resolve.modules property to be ['linked_modules', 'node_modules'] rather than just 'node_modules' and then copying the package I want to preview changes for into the linked_modules folder.

The biggest hurdle is to get TypeScript to play ball here. I might be forced to copy .d.ts files both into linked_modules and node_modules to get type checking to work, but thats probably worth it.

[nbkhope]

Any solution to this? I also have npm link modules that are consumed by the Next.js app, but changing anything in that changes node_modules/ which isn't covered by the watch function.

[manutepowa]

Any solution to local package development ?

[NotYoojun]

Hi, this is a great feature! And I think it's a good approach to add an option of packages to watch in next.config.mjs. In this way things will be much more convenient.