next-transpile-modules: Hot Reload doesn't work with linked modules

[ check] I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE
[check ] I WILL GIVE 10$ TO CHARITY IF MY SOLUTION WAS ACTUALLY IN THE README/FAQ

Are you trying to transpile a local package or an npm package? NPM Package

Describe the bug We have multiple modules that are linked to a main project. There are like 11 modules.

A while ago, we used npm install in the main Project and then link the Modules using npm link. Upon saving, the linking worked well. The hot reloading was working and we could see our changes live.

One month ago, after we ran npm install, we encountered an error where the hot reload wouldn’t work anymore. When we link the modules, everything seems to be in order. The modules in main project are linked. Upon saving, we don’t get any error, the terminal tells us “compiled successfully”. Hot reload works only in the main platform now. The interesting part is that when saving in modules, the compilation happens two times and much faster than the one that works. After some days of debugging, we learned that disabling webpack 5 and using webpack 4, would help us a bit. There are still some modules that are not working (4 out of 11).

Our productivity decreased exponentially.

To Reproduce I’m not sure how to tell you. Our Packages are private.

Expected behavior After we install the platform and link all our modules, the hot reload should work no matter where you are saving.

Setup

Next.js version: v11.1.2
next-transpile-modules version: 8.0.0
Node.js version: 14.17.6
npm/yarn version: npm 6.14.15
Operating System: macOS Catalina 10.15.7
Webpack 4 or 5: webpack 4 (webpack 5 is where the big issues come)

Additional context Add any other context about the problem here.

next.config.js.zip

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 18 (5 by maintainers)

Most upvoted comments

I found a potential workaround by adding this to next config:

webpack: (config) => {
        if (process.env.NODE_ENV === 'development') {
            config.watchOptions = {
                poll: 10000,
            };
        }

        return config;
    },

Not sure if it’s a stable fix or not, but works for now. Perhaps it’s a deeper issue with Webpack 5 or Watchpack.

oalexdoda on Sep 24, 2021

I put the learnings of this and another issue into a package and published it here

It’s very simple (this is the code):

const path = require("path");

const withLinksCreator = (linkableModules) => (nextConfig) => {
  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      if (typeof nextConfig.webpack === "function") {
        config = Object.assign({}, nextConfig.webpack(config, options));
      }

      if (options.isServer) {
        config.externals = ["react", ...config.externals];
      }

      if (process.env.NODE_ENV === "development") {
        config.watchOptions = {
          poll: 2500,
        };
      }

      const aliases = [...linkableModules, "react", "react-dom"].reduce(
        (previous, module) => {
          return {
            ...previous,
            [module]: path.resolve(__dirname, "../..", "node_modules", module),
          };
        },
        {}
      );

      config.resolve.alias = {
        ...config.resolve.alias,
        ...aliases,
      };

      return config;
    },
  });
};

module.exports = withLinksCreator;

… but it makes it easier to also transpile and work with linked modules with fast refresh!

Hope someone finds this useful.

Karsens on Jan 3, 2022

@altechzilla you just made my day!! @martpie If you have many projects that all rely on the same shared packages that all need to be transpiled, and you also try to run and share expo projects and next-projects together in the same workspace, it’s really hard to make it work, because there are going to be many conflicting packages. At my company we’ve tried for days but couldn’t get it to work, especially because of the invalid hook call error, but there were more things. I think @altechzilla found a really good solution for next projects. Unfortunately this isn’t the full solution for me, because react native doesn’t support symlinks. That’s why I’ve built a cli that automatically tracks all your node_modules and dependencies and dependants and watches and copies changed things from the source to all destinations: it’s called papapackage.

Karsens on Dec 26, 2021

What additional context would you need? I broke down in detail everything above. I’ll be happy to answer any questions that help identify what it is. Also, there was no error whatsoever in the console, so how would one know what pooling is in the first place?

oalexdoda on Sep 24, 2021