🐥

[Next.js] AppRouterとJestでbabelの設定を併用する

2023/12/30に公開

Next.js

TypeScript

Jest

tech

エラー内容

Next.jsでAppRouterを利用する場合、SWCが組み込まれており、
この設定が他のライブラリのbabelの設定を競合する場合があります。

./app/layout.tsx:3:1
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict

Next.jsのページ

しかしこの指示に沿ってbabel.config.jsを消した場合、
TypeScriptを利用したJestでトランスパイルが出来なくなり、動かなくなってしまいます。
jestの解決策ページ

解決策

jest.config.js側に記載し、babel.config.jsは削除します。
記載の例ではNext.jsのbabelの設定を流用するようにしています。

jest.config.js

module.exports = {
  ・・・,
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],
  },
};

エラー内容

解決策

Discussion