找不到模块：无法解析“fs” - NextJS

Question

我正在尝试将 Node-jsEncrypt 与 NextJS (tsx) 一起使用：

索引.tsx

import JSEncrypt from 'node-jsencrypt';

包.json

"node-jsencrypt": "^1.0.0"

日志

错误 - ./node_modules/node-jsencrypt/index.js:2:0

找不到模块：无法解析“fs”

注意：我没有找到该'webpack.config.js'文件，正如我在某些主题中看到的那样。

Answer 1

好吧，我解决了这个问题，我想我已经涵盖了所有可能的组合。在存储库中您可以找到工作示例。有 3 种可能的方法，正确的方法取决于项目中已有的内容 - 原始问题中未指定的详细信息。

1. 使用 webpack 5 时的解决方案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;
  },
};

2. 使用 webpack 4 时的解决方案 -next.config.js

module.exports = {
  webpack(config) { // we depend on nextjs switching to webpack 4 by default. Probably they will 
    // change this behavior at some future major version.
    config.node = {
      fs: "empty", // webpack4 era solution 
    };

    return config;
  },
};

3. 您可以考虑使用其他库。根据它们是jsencryptnode-jsencrypt readme的节点端口，这里我假设您尝试为浏览器构建。节点库卡在版本 1 上，而原始库已经是版本 3 了。当我在main 上检查最后一次提交时，如果您使用这个库，它构建得很好，没有任何问题。

原来，nextjs不知道的答案：

从版本 5 开始，webpack 不包含节点库的 Polyfile。就您而言，您很可能需要添加resolve.fallback.fs: false到您的 webpack 配置中。

有关此选项的更多信息 - https://webpack.js.org/configuration/resolve/#resolvefallback 它在 v4 到 v6 迁移指南中提到，如果是您的情况：https: //webpack.js.org/migrate/5/