■next-transpile-modules が不要になった

ビルド時にエラーに遭遇

$ npm run build

build: > Build error occurred
build: TypeError: Cannot read properties of undefined (reading 'and')
build:     at Object.webpack (/Users/products/node_modules/next-transpile-modules/src/next-transpile-modules.js:201:60)
build:     at Object.getBaseWebpackConfig [as default] (/Users/products/node_modules/next/dist/build/webpack-config.js:1446:32)
build:     at async Promise.all (index 0)
build:     at async Span.traceAsyncFn (/Users/products/node_modules/next/dist/trace/trace.js:79:20)
build:     at async /Users/products/node_modules/next/dist/build/index.js:483:33
build:     at async /Users/products/node_modules/next/dist/build/index.js:467:13
build:     at async Span.traceAsyncFn (/Users/products/node_modules/next/dist/trace/trace.js:79:20)
build:     at async Object.build [as default] (/Users/products/node_modules/next/dist/build/index.js:66:29)
build: error Command failed with exit code 1.
build: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
build: Error: command finished with error: command (typescript/apps/moet) yarn run build exited (1)

Nextv13.1以降では、next-transpile-modulesをimportしないで、ネイティブのtranspilePackages を使用するようになった

next.config.js

-const withTM = require('next-transpile-modules')(['awesome_module']);

-module.exports = withTM({});
+module.exports = {
+  transpilePackages: ['awesome_module'],
+};

match1124

■ next-13.js を参照してほしい

コンポーネントのテストでエラー

Test suite failed to run

    Cannot find module 'next/dist/shared/lib/router-context' from 'node_modules/next-router-mock/dist/MemoryRouterProvider/next-11.js'

    Require stack:
      node_modules/next-router-mock/dist/MemoryRouterProvider/next-11.js
      node_modules/next-router-mock/dist/MemoryRouterProvider/next-13.js
      node_modules/next-router-mock/dist/MemoryRouterProvider/index.js

◎ 原因

next-router-mock がなぜか、node_modules/next-router-mock/dist/MemoryRouterProvider/next-11.jsの古いバージョンを参照していた？から？

◎ 解決策

jest.config.js

moduleNameMapper: {
        'next/dist/shared/lib/router-context':
            'next/dist/shared/lib/router-context.shared-runtime',
    },

match1124

■ Next.js 13 からの NextRouter was not mounted エラー

app ディレクトリ内でnext/routerを利用したとき
- 解決策：next/navigation or next/compat/routerを利用する
unit test 時
- 解決策：next/router を mock する

上記の場合でエラーが発生しうる。

コンポーネントがNext.jsアプリケーションの外部でuseRouterを使用した、またはNext.jsアプリケーションの外部でレンダリングされた。この現象は、useRouterフックを使用するコンポーネントのユニットテスト時に発生する可能性があります。
また、アプリルータのnext/navigationからのuseRouterは、ページ内のuseRouterフックとは動作が異なるため、アプリディレクトリ内のnext/routerからuseRouterフックを使おうとしたときにも発生します。

参照元：https://nextjs.org/docs/messages/next-router-not-mounted

Next.js 13では、next/routerからuseRouterを呼び出すと、マウントされていない場合にエラーがスローされることに注意してください。これには、開発者を支援するために使用できるエラーページが含まれるようになりました。
将来的には、useRouterのインスタンスをnext/routerからnext/compat/routerに変換するcodemodを導入したいと考えています。

参照元：https://github.com/vercel/next.js/pull/42502

Next.js v12 -> v13 アップデート対応

■next-transpile-modules が不要になった

■ next-13.js を参照してほしい

◎ 原因

◎ 解決策

■ Next.js 13 からの NextRouter was not mounted エラー

参考