模块未找到：错误：无法解析模块“fs”。

Question

我正在使用Babel和Webpack制作React应用程序，并希望使用npm上的file-exists软件包。我已经安装并将该软件包保存为我的项目依赖项。在运行npm start后，我遇到了这个错误：

ERROR in ./~/file-exists/index.js
Module not found: Error: Cannot resolve module 'fs' in C:\GitHub\CryptoPrices\node_modules\file-exists
@ ./~/file-exists/index.js 3:9-22

file-exists 软件包使用 fs 作为依赖项，但由于某种原因它不起作用。如果我没有在任何地方要求使用file-exists，则npm启动并运行没有任何问题。

这是我的Webpack配置文件：

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      // exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

我对Webpack和Babel都很陌生，所以有点摸不着头脑。

- Jorge Eduardo Sosa

Answer 1

看起来你在你的index.js文件中调用了fs的file-exists方法。我不确定在什么上下文中调用该方法，但这似乎是客户端对服务端方法的调用。我最近也遇到了类似的问题。

据我所知，主要问题似乎是您不能在浏览器解释的客户端代码（前端）中调用服务器端（Node）方法。您必须从服务器调用它们。

Webpack可以将fs模块代码加载到前端，但浏览器实际上无法解释那些Node方法并运行它们；只有Node环境才能做到这一点。(更多信息)

您可以通过修改对fs方法的调用以在服务器端发生，或者找到一个等效的支持浏览器的包，提供与您需要的fs方法相同的功能，但可以在浏览器中运行来解决核心问题。

快速搜索“浏览器fs模块”会出现各种可能适用于您需求的选项，例如fs-web、browserify-fs或filer。

这里有一个类似的问题，提供了一些见解。 Use fs module in React.js,node.js, webpack, babel,express

- jess

---

你可能会发现这个帖子很有趣。它讨论了在浏览器中使用fs处理类似情况的问题。https://dev59.com/OKXja4cB1Zd3GeqPSouk - jess

这里有另一个相关的问题。https://stackoverflow.com/questions/35951874/problems-running-node-js-in-browser - jess

还有一个关于这个主题的线程... https://dev59.com/jGAg5IYBdhLWcg3wG37O - jess

感谢您的回答。这个错误困扰我们很长时间了。最终将代码从NextJS模块移动到Cloud Functions模块，问题迎刃而解。 - Aayush Goyal

Answer 2

node: {
  fs: 'empty'
}

尝试将上述代码添加到webpack配置文件中，错误应该会消失。

- Ihor Lavs

---

我已经尝试过了，错误消失了，但是文件存在的检查却不起作用。 - Jorge Eduardo Sosa