next and next-transpile-modules

[MythicManiac]

Currently this template has a nextjs 9 example project, using next-transpile-modules 3.3.0 to handle shared packages. For reference, as of writing this next-transpile-modules is at version 6.4.0, and next is version 10.

As I described in the nextjs issue here vercel/next.js#5666 (comment), the next-transpile-modules changed their module resolution to use enhanced-resolve between the versions 3 and 4, which seemingly broke the usecase found in this repo.

As also suggested in that thread, I managed to work around this issue in my own project with the following next.config.js:

module.exports = {
  webpack: (config) => {
    config.module.rules.forEach((rule) => {
      if (rule.test && rule.test.toString().includes("tsx|ts")) {
        rule.include = [
          ...rule.include,
          // eslint-disable-next-line @typescript-eslint/no-var-requires
          require("path").join(__dirname, "../../packages"),
        ];
      }
    });
    return config;
  },
};

So far I'm unsure if there are any caveats to this approach as compared to next-transpile-modules. Either way, it might make sense to update the template to use something that does not break with latest versions of the packages involved.

[NiGhTTraX]

Thanks for reporting this, @MythicManiac! I've updated the example to use the same override as CRA. Using include = undefined; exclude = /node_modules/ will limit the scope of the compilation to only the files included in you app and produce smaller bundles (56kb vs 62kb in this example)