NextjsでのMonorepoでは、next-transpile-modules でのトランスパイルが必要

別モジュールを参照する際に、package.jsonにローカルモジュールへの依存関係を記すだけだと、ビルド時にエラーとなる

// package.json
{
  "dependencies": {
    "my-ui": "*"
  }
}

エラー内容。今回だとTypeScriptファイルのロードに失敗していた。(as const などの記法)

Module parse failed: Unexpected token (4:17)
moet:dev: 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

Haru

とはいえ、TypeScriptファイルのローダーはNextjsではデフォルトで設定されている。

ただ上記エラーを読むと、ローカルモジュールの読み込み時にその設定が適用されていないことがわかる。TypeScriptファイルのローダーもだし、他にはホットリロードの設定などもある。

下記 next-transpile-modules を使用することにより、
Next.jsのBabel設定から、ローカルモジュールをトランスパイルする。

const withTM = require("next-transpile-modules")(["my-ui"]);

module.exports = withTM({
  reactStrictMode: true,
});

stackoverflowにも同様の投稿はあった。

Haru

Next.js 13.1からはnext-transpile-modulesはNext.jsに組み込まれたため、
ネイティブの機能として使用する必要がある。