martpie / next-transpile-modules

Next.js plugin to transpile code from node_modules. Please see: https://github.com/martpie/next-transpile-modules/issues/291
MIT License
1.13k stars 85 forks source link

Make packages that are transpiled nonManaged #257

Closed paales closed 1 year ago

paales commented 2 years ago

Is your feature request related to a problem? Please describe.

We are using next-transpile-modules with great success and it is vital to our development workflow.

We are not only using it in a monorepo sense, but also use it when the packages are installed via node_modules. It works great, however it seems that webpack assumes that the packages in there are managed (managedPaths) and thus caches them hard.

We would like to to be able to make the path non-managed so the developer is able to fiddle around in those folders, make patches for those folders, etc., without breaking all caches.

Possibly related to: https://github.com/martpie/next-transpile-modules/issues/167 and thus https://github.com/webpack/webpack/pull/14509

Describe the solution you'd like

Be able or have as a standard that all transpiled folders can be changed and nextjs doesn't cache them indefintely.

Alternatives considered

Completely alternative setups would be welcome as well, but haven't found a solution yet.

martpie commented 2 years ago

Yes, this is a known issue I wanted to fix for quite some time:

https://github.com/martpie/next-transpile-modules/blob/c5f548e9adafdc9c5afb8a97f15a92f92bdcb266/src/next-transpile-modules.js#L179-L183

I was waiting for Webpack to implement Globs or non-managed paths which I believe they did a couple of months ago.

I don't have much time to do it myself. so a PR would be very appreciated :) I can provide support if needed.

paales commented 2 years ago

@martpie We've got it working for our @graphcommerce namespace:

https://github.com/graphcommerce-org/graphcommerce/blob/73889f07b1d1bccd4c9e40b28ec31635346c1271/packagesDev/next-config/src/index.ts#L54-L64

To get it working with all packages is still in the works though.

      config.snapshot = {
        ...(config.snapshot ?? {}),
        managedPaths: [/^(.+?[\\/]node_modules[\\/])(?!@graphcommerce)/],
      }

      // `config.watchOptions.ignored = ['**/.git/**', '**/node_modules/**', '**/.next/**']
      // Replace the '**/node_modules/**' with a regex that excludes node_modules except @graphcommerce
      config.watchOptions = {
        ...(config.watchOptions ?? {}),
        ignored: ['**/.git/**', '**/node_modules/!(@graphcommerce)**', '**/.next/**'],
      }