Closed3
NextチュートリアルをTypeScriptに変換中に生じた`Can't resolve 'fs'`エラー
実施しているチュートリアル
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました
- ブログのデータ完了後、チュートリアルファイルをすべてtsxに変更中に発生。
エラー詳細
-
エラーログ
[1/4] Resolving packages...
Module not found: Can't resolve 'fs'
> 1 | import fs from "fs";
2 | import path from "path";
3 | import matter from "gray-matter";
4 |
Import trace for requested module:
./pages/index.tsx
https://nextjs.org/docs/messages/module-not-found
Could not find files for / in .next/build-manifest.json
Could not find files for / in .next/build-manifest.json
によると、fs
の処理は本来サーバサイド側でのみ動くはずだが、レンダリング中にクライアントで実行されていることが問題の様子。以下公式issue。
サーバサイドで実行する処理がフロントエンドjsの中に混ざっていることが原因らしく、一旦以下で回避可能か調査。
next.config.js
module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback.fs = false;
config.resolve.fallback.child_process = false;
config.resolve.fallback.net = false;
config.resolve.fallback.dns = false;
config.resolve.fallback.tls = false;
}
return config;
},
};
このスクラップは2022/10/28にクローズされました