reactjs 未找到模块:无法解析“fs”- NextJS

wa7juj8i  于 2023-05-28  发布在  React
关注(0)|答案(3)|浏览(218)

我尝试在NextJS(tsx)中使用node-jsencrypt:
index.tsx

import JSEncrypt from 'node-jsencrypt';

package.json

"node-jsencrypt": "^1.0.0"

日志
错误- ./node_modules/node-jsencrypt/index.js:2:0
未找到模块:无法解析'fs'
注意:我没有找到'webpack.config.js'文件,就像我在一些主题中看到的那样。

7hiiyaii

7hiiyaii1#

好吧,我玩了这个问题&我想我有什么涵盖所有可能的组合。在repo中,您可以找到工作示例。有三种可能的方法,正确的方法取决于你的项目中已经有什么-在最初的问题中没有指定的细节。
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;
  },
};

1.使用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;
  },
};

1.你可以考虑使用其他图书馆。根据node-jsencrypt readme,它们是jsencrypt的节点端口,这里我假设您尝试为浏览器构建。节点库卡在版本1,而原始库已经是版本3。正如我在the last commit on 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/

vaj7vani

vaj7vani2#

在next.config.js文件中添加以下代码

build: {
extend(config, {}) {
    config.node = {
        fs: 'empty'
    }
}

},

hi3rlvi2

hi3rlvi23#

我在集成sendGrid时也遇到了同样的问题。但是,我通过在next.config.js文件中添加webpack属性来解决,如下所示:

const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve = {
      ...config.resolve,
      fallback: {
        fs: false,
      },
    };
    return config;
  },
};

module.exports = nextConfig;

相关问题