Next.js × Ant Designを使ったら、「Cannot use import statement outside a module」で怒られた件

概要

Next.js × AntDesignで個人開発を行っています。

AntDesignを導入後、「Cannot use import statement outside a module」というエラーが発生し、解決までに時間を要したので、備忘も兼ねて残しておきます。

殴り書きなので、ご容赦ください。

「Cannot use import statement outside a module」とは

直訳では「モジュール環境外ではimportが使えない」という意味になります。

一般的な解決方法は、next.config.js に "type": "module"を追加するなどになりますが、Google検索で出てきた内容を一通りやりましたが、解決できませんでした。

解決方法

Ant DesignのGithub Issueが立てられており、next.config.jsに以下を追加する必要があります。

node_modulesに入っているパッケージをトランスパイルし、バンドルする必要があるようです。
そのためには、transpilePackages を使う必要があります。

const nextConfig = {
  reactStrictMode: true,
  // === 下記を追加 ===
  transpilePackages: [ "antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", "rc-tree", "rc-table" ],
}