未找到模块：无法在 Next.js 应用程序中解析“fs”

Question

无法识别我的 next.js 应用程序中发生了什么。因为 fs 是 nodejs 的默认文件系统模块。它给出了 module not found 的错误。

原文由 Ibad Shaikh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您使用 fs ，请确保它仅在 getInitialProps 或 getServerSideProps 内。 （包括服务器端渲染）。

您可能还需要创建一个包含以下内容的 next.config.js 文件来构建客户端包：

对于 webpack4

 module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

    return config
  }
}

对于 webpack5

 module.exports = {
  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false };

    return config;
  },
};

注意：对于其他模块如 path ，您可以添加多个参数，如

{
  fs: false,
  path: false
}

原文由 Arjun Kava 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在这上面花了几个小时，解决方案也在 Stackoverflow 上，但在不同的问题上 -> https://stackoverflow.com/a/67478653/17562602

在此我请求 MOD 允许转发这个，因为这个问题是第一个出现在谷歌上的问题，并且可能越来越多的人偶然发现和我一样的问题，所以我会尽量为他们节省一些汗水

所以，你需要在你的 next.config.js 中添加这个

    module.exports = {
  future: {
    webpack5: true, // by default, if you customize webpack config, they switch back to version 4.
      // Looks like backward compatibility approach.
  },
  webpack(config) {
    config.resolve.fallback = {
      ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
        // by next.js will be dropped. Doesn't make much sense, but how it is
      fs: false, // the solution
    };

    return config;
  },
};

它对我来说就像一个魅力

原文由 diazlp 发布，翻译遵循 CC BY-SA 4.0 许可协议