Support next.js 13

[vpontis]

I believe this doesn't work with Next.js 13 w/ the following config:

  experimental: {
    appDir: true,
  },

I get the following error re Webpack:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[0].module.rules[3] should be one of these:
   ["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
   -> A rule.
   Details:
    * configuration[0].module.rules[3].oneOf[6].include.or[3] should be an instance of RegExp.
    * configuration[0].module.rules[3].oneOf[6].include.or[3] should be a string.
    * configuration[0].module.rules[3].oneOf[6].include.or[3] should be an instance of function.
    * configuration[0].module.rules[3].oneOf[6].include.or[3] should be an object:
      object { and?, not?, or? }
      -> Logic operators used in a condition matcher.
    * configuration[0].module.rules[3].oneOf[6].include.or[3] should be an array:
      [RegExp | string | function | object { and?, not?, or? } | [(recursive), ...], ...]
      -> A list of rule conditions matching an absolute path.
    * configuration[0].module.rules[3].oneOf[6].include.or[3] should be one of these:
      RegExp | string | function | object { and?, not?, or? } | [(recursive), ...]
      -> A condition matcher matching an absolute path.
    * configuration[0].module.rules[3].oneOf[6].include.or[3] should be one of these:
      RegExp | string | function | object { and?, not?, or? } | [(recursive), ...]
      -> A rule condition matching an absolute path.
    at validate (/Users/victor/Code/luma/node_modules/.pnpm/next@13.0.0_mk5yftg2men2cn3ayx4t7ddtvy/node_modules/next/dist/compiled/schema-utils3/index.js:1:150822)
    at validateSchema (/Users/victor/Code/luma/node_modules/.pnpm/next@13.0.0_mk5yftg2men2cn3ayx4t7ddtvy/node_modules/next/dist/compiled/webpack/bundle5.js:28:1389593)
    at create (/Users/victor/Code/luma/node_modules/.pnpm/next@13.0.0_mk5yftg2men2cn3ayx4t7ddtvy/node_modules/next/dist/compiled/webpack/bundle5.js:28:1435054)
    at webpack (/Users/victor/Code/luma/node_modules/.pnpm/next@13.0.0_mk5yftg2men2cn3ayx4t7ddtvy/node_modules/next/dist/compiled/webpack/bundle5.js:28:1435691)
    at Object.f [as webpack] (/Users/victor/Code/luma/node_modules/.pnpm/next@13.0.0_mk5yftg2men2cn3ayx4t7ddtvy/node_modules/next/dist/compiled/webpack/bundle5.js:28:874364)
    at HotReloader.start (/Users/victor/Code/luma/node_modules/.pnpm/next@13.0.0_mk5yftg2men2cn3ayx4t7ddtvy/node_modules/next/dist/server/dev/hot-reloader.js:460:44)
    at async DevServer.prepare (/Users/victor/Code/luma/node_modules/.pnpm/next@13.0.0_mk5yftg2men2cn3ayx4t7ddtvy/node_modules/next/dist/server/dev/next-dev-server.js:515:9)
    at async /Users/victor/Code/luma/node_modules/.pnpm/next@13.0.0_mk5yftg2men2cn3ayx4t7ddtvy/node_modules/next/dist/cli/next-dev.js:246:13 {
  errors: [
    {
      keyword: 'oneOf',
      dataPath: '[0].module.rules',
      schemaPath: '#/properties/rules/oneOf',
      params: [Object],
      message: 'should match exactly one schema in oneOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Array],
      children: [Array]
    }

[nicosh]

Also now that next.js 13 has introduced turbopack as the new successor to Webpack i'm wondering if next-transpile-modules will keep able to transpile modules, even because at the moment turbopack is available only on dev mode but i guess in the near future will be the default next.js bundler.

[martpie]

Hello there, I haven't fully watched Next.js conf, but I roughly saw the new bundler announcement.

I should definitely have a look at this, and see if we can access (and edit!) the Turbopack config from next.config.js. If yes, I am pretty we should be able to make it work. :)

Would have been cool to have a heads up from the official team prior to the release though.

[nicosh]

Would have been cool to have a heads up from the official team prior to the release though

This. Even better they should make you a hiring proposal 🙂, i dont understand why while next.js keeps building (or acquiring) its own tools (especially about monorepos) we still need to use third parties plugins for have a real monorepo architecture.

[vpontis]

Thank you @martpie! This is such an awesome package :)

[timneutkens]

Hey, just a heads up Next.js 13 has a dedicated option called transpilePackages that is somewhat equivalent to next-transpile-modules, you can check the docs here: https://beta.nextjs.org/docs/api-reference/next.config.js#transpilepackages. I've sent a message to the docs team to update the stable docs and upgrade guide to mention this config as well as it applies to both pages and app.

I think next-transpile-modules can now be deprecated (but it's not my decision ofcourse), @martpie wanted this as a built-in option for a long time and we made it happen 🙏

Thanks for maintaining this package for quite some time @martpie, it had quite some usage which is why the built-in option made sense. Another reason is that Next.js 13 changes the compilation of packages/modules quite a bit to support React Server Components.

[martpie]

Hi Tim!

That's awesome to hear, I gotta try this new option, and if it's a perfect replacement, then we should definitely (and happily!) deprecate next-transpile-modules 🥳

[Fawwaz-2009]

in my case the new transpilePackages option alone was not enough, seeing errors that a custom loader is needed. But using both transpilePackages and next-transpile-modules fixed the issue

module.exports = withTM({
    experimental: { transpilePackages: ["package1", "package2"] },
  });

[martpie]

Some update: got a lot on my plate for work right now, but I'll be working on that this weekend. Sorry for the wait, we're all excited about Next.js 13 😊

[timneutkens]

in my case the new transpilePackages option alone was not enough, seeing errors that a custom loader is needed.

This is not super helpful in resolving what you ran into, can you create a reproduction and open an issue on the Next.js repository.

[martpie]

cf. #281 for wip.

[max-sym]

@Fawwaz-2009 https://github.com/martpie/next-transpile-modules/issues/280#issuecomment-1292871889 It brings back the error that the OP mentioned in my case.

[martpie]

Fixed in next-transpile-modules@10.0.0, cheers!

[martpie]

Side note: app dir is experimental, use with caution!

[oalexdoda]

Anybody else having issues using hooks in transpiled components in Next 13 + next-transpile-modules?

[martpie]

Can you open an issue and / or create a reproduction?

[karanshah229]

@timneutkens @martpie @here Any idea on timelines as to when transpilePackages will become stable. We want to use it in a production application but are hesitant since it's in the experimental phase as of now.

[timneutkens]

@karanshah229 In 13.1, can't share a time yet. We're not planning additional changes to it so should be fine to use and switch over the flag once 13.1 is out.

[martpie]

@karanshah229 I would recommend switching now.

Yes it's experimental, but it's only a build step thing, if it does not work for you you will see it before your app is deployed to prod, and you will likely not run into any runtime issue (unless you use it to make package IE11 compatible, a thing you should NOT do).

I have personally tested all recommended setups and they are all working great with transpilePackages, and I am preparing an official deprecation for soon :)