LoginSignup
0
0

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

Last updated at Posted at 2023-10-25

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

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

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

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

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

@honey32 さん にご指摘をうけて調査したところ、表題のエラーはかなり特殊な状況でしか再現しませんでした。(コメント欄も御覧ください)

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


素のNextでは再現しなかったので、現象がおこったアプリのコードを見直しました。

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

image.png

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

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

image.png

この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'

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


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

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

image.png

状況

  • 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.tslib.tsなど、なんでも良いです。

補記

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

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

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

0
0
8

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0