【Next.js】< Module not found: Can't resolve 'fs' >

(2023-10-29 加筆）
Aggregating modulesが原因だったかもしれない。

上図のexport * from 'module-name'をエラーが出ていたときは使用していました。

次のように変更しました。

export * from 'module-name'
// ↓
export { name1 } from "module-name"

本記事の内容は誤りでした。(2023-10-26 加筆）

以下はその状況説明と解決した方法です。

---

本記事の現象は素のNextでは再現しませんでした。そこで、現象がおこったアプリのコードを見直しました。

元の記事（下の方にあります）ではエラー画面の一部しか記載しませんでしたが、すべての内容は以下の通りとなります。

図中のImport Trace（以前は注目していませんでした）を辿ってみました。

remarkWrapper.tsという外部モジュールをまとめるバレルファイルを以前作っていました。

このremarkWrapper.tsのあとからインポートが node_modulesに変わっていました。よって、当該ファイルのインポートが悪さしているのかなと思ったので、index.ts へのインポートを外しました。

// index.ts

export * from './getOembed'
export * from './getDataTheme'
// export * from './renderReact'
export * as rehype from './rehypeWrapper'
// export * as remark from './remarkWrapper' <===!!!!!!
export { default as getLang} from './getLang'

すると本記事のエラーは生じなくなりました。

以下、元の記事です。

---

次のエラーに対して、再現する状況と解決方法について示します。

特にバレルエクスポート - 参考１, 参考２ - している場合に発生しやすいかと思います。

状況

• Next.js: 13.5.6
• Client Component にモジュールをインポートしている。
• そのモジュールは、index.ts ファイルからエクスポートしている。

// ButtonTest.tsx
'use client' <=== Client Component Only!!!!

import { testHello } from '@/lib/testHello' <=== OK (/lib/testHello.ts)
import * as TEST from '@/lib'               <=== NG (/lib/index.ts)
import {testHello} from '@/lib'             <=== NG (/lib/index.ts)
import {testHello} from '@/lib/index'       <=== NG (/lib/index.ts)
import {testHello} from '@/lib/libs'        <=== OK (/lib/libs.ts)
import * as TEST from '@/lib/index.lib'     <=== OK (/lib/index.lib.ts)


export const ButtonTest = () => {
  return (
    <div>
      <button
        onClick={() => {
          testHello()
        }}
      >
        ButtonTest
      </button>
    </div>
  )
}

解決方法

エクスポートするファイル名をindex.ts以外にしてください。それ以外であれば、index.lib.ts や lib.tsなど、なんでも良いです。

補記

index.jsのパターンは試していないのですが、多分だめでしょう。

クライアントサイドにはindexファイルによるインポートを解決する仕組みがないのでしょうか？

ここで示した解決方法以外があれば教えてほしいです。