【トラブルシュート】Jest/NextJS 環境でアプリ起動したら"next/font" requires SWC although Babel is being usedのエラーが発生

はじめに

Jest でテストコードを作成する過程で下記の jest.config.js と babel.config.js を作成していたものの、NextJs でアプリ起動時に掲題のエラーが出てハマったのでその対応メモになります。

 

jest.config.js

module.exports = {
  testEnvironment: "jest-environment-jsdom",
  transform: {
    "^.+\\.(ts|tsx)$": "babel-jest", // TypeScriptファイルをトランスパイル
    "^.+\\.(js|jsx)$": "babel-jest", // JavaScriptファイルもトランスパイル
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx"], // 拡張子を追加
  setupFilesAfterEnv: ["/setupTests.ts"],
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  },
};

babel.config.js

module.exports = {
  presets: [
    "@babel/preset-env",
    ["@babel/preset-react", { runtime: "automatic" }], // JSXサポートを追加
    "@babel/preset-typescript", // TypeScriptサポート
  ],
};

 

原因について

NextJs では以下に記載の通り、デフォルトで SWC というコンパイラを使用しています。

nextjs.org

この SWC コンパイラと、Jest 対応で追加した Babel とでコンパイラが複数競合したことで今回のエラーが発生しました。

※Jestで JSX 構文などトランスパイルしてテスト実行できるようにするために、Babel を入れていました

 

対応内容について

NextJsデフォルトのSWCコンパイラはそのままで、Babel なしで Jest テストは動かしつつ、NextJsアプリも起動するように修正しました。

 

対応したこと

• babel.config.js を削除
• jest.config.js を下記のように修正

module.exports = {
  testEnvironment: "jest-environment-jsdom",
  transform: {
    "^.+\\.(ts|tsx|js|jsx)$": [
      "babel-jest",
      {
        presets: [
          "@babel/preset-env",
          ["@babel/preset-react", { runtime: "automatic" }], // JSXサポートを追加
          "@babel/preset-typescript",
        ],
        plugins: [
          // Babelのプラグインをここに直接指定
          "@babel/plugin-transform-runtime",
        ],
      },
    ], // TypeScript,JavaScriptファイルをトランスパイル
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx"], // 拡張子を追加
  setupFilesAfterEnv: ["/setupTests.ts"],
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  },
  extensionsToTreatAsEsm: [".ts", ".tsx"],
};

 

Jest だけでテストコードが動くように、plugins に babel plugin の指定を追加しました。

なお、追加で下記コマンドで Babel 関連Pluginをインストールしました。

    npm install --save-dev @babel/plugin-transform-runtime

    npm install --save @babel/runtime

 

終わりに

NextJs環境下では Babel がうまく動かないことを知りました。同じようなエラーに遭遇した方にとって何か参考になれば幸いです。

 

参考記事

zenn.dev