monorepoでNext.jsから共通型定義を切り出そうとしてハマった

木瓜丸です。
Next.jsでフロントエンド開発をしており、WASMやAudioWorklet、Workerといった別でビルドする必要があるものを同時に作るためにmonorepoで管理しています。
今回型定義の方法を変えてみようと試みたのですが、軽くハマったので備忘録です。

やったこと

施行前

Next.jsのパッケージの中に型定義を含ませ、他のパッケージから../main/path/to/typesという形で参照していました。

front
├── package.json
├── packages
│   ├── main      // Next.js(型定義を含む)
│   ├── worker    // WebWorker
│   └── worklet   // AudioWorklet
└── yarn.lock

施行後

Next.js内にあった型定義を単一のパッケージ「types」に切り出し、main、worker、workletはtypesに依存させました。

front
├── package.json
├── packages
│   ├── main
│   ├── worker
│   ├── worklet
│   └── types
└── yarn.lock

ハマったこと

typesをNext.jsからimportすると、次のようなエラーがでました。

Module parse failed: Unexpected token (7:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

解決策

https://github.com/vercel/next.js/pull/22867
Next.jsでは、パッケージ外のtypescriptを読み込むことがデフォルトではできず、experimental.externalDirを有効化する必要があるようです。

//next.config.js
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    externalDir: true,
  },
  ...略...
};

export default nextConfig;