未找到模块：错误：无法使用 Webpack 解析“fs”

Posted 2023-03-08

【中文标题】未找到模块：错误：无法使用 Webpack 解析“fs”

【英文标题】：Module not found: Error: Can't resolve 'fs' Using Webpack

【发布时间】：2018-09-30 14:44:03

【问题描述】：

嗨，我在我的应用程序中使用套接字 io。这需要 fs。当我尝试使用下面的 webpack 配置捆绑我的 javascript 时。我收到错误无法解析“fs”。

Module not found: Error: Can't resolve 'fs' in 'my application path/node_modules/socket.io/lib'

我通过添加 target:'node' 和 node:fs:'empty' 找到。这个问题得到了解决。

但是 sass-loader 有一个问题。出现以下错误。

ERROR in javascript/bundle.js from UglifyJs
Unexpected token: name (zlibLimiter) [javascript/bundle.js:60019,4]
Child extract-text-webpack-plugin ../../../node_modules/extract-text-webpack-plugin/dist ../../../node_modules/css-loader/index.js??ref--2-2!../../../node_modules/sass-loader/lib/loader.js!s

忽略上述错误运行应用程序。低于错误。

external "crypto":1 Uncaught ReferenceError: require is not defined
    at Object.__decorate (external "crypto":1)
    at __webpack_require__ (bootstrap 93620a17882f7a2aa1d3:19)
    at Object.byteToHex (rng.js:4)
    at __webpack_require__ (bootstrap 93620a17882f7a2aa1d3:19)

下面是我的 webpack 配置和版本。谁能帮我解决这个问题。

"webpack": "~3.6.0", npm -v 5.8.0 节点 -v v8.4.0

const webpack = require('webpack');
const env = process.env.NODE_ENV;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const extractSass = new ExtractTextPlugin(
  filename: 'css/[name].css',
  allChunks: false
);


let output = 
  path: __dirname + '/src/main/resources/static/',
  filename: 'javascript/[name].js'
;

if (env === 'debug' || env === 'nondev') 
  output = 
    path: __dirname + '/target/classes/static/',
    filename: 'javascript/[name].js'
  ;


let config = 
  context: __dirname + '/app/js/src',
  entry: 
    bundle: './index.jsx',
    application: './static/scss/application.scss',
    'application-pdap': './static/scss/application-pdap.scss'
  ,
  output: output,
  devtool: 'cheap-module-source-map',
  module: 
    rules: [
      
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: presets: ['es2015', 'react']
      ,
      
        test: /\.(woff|woff2|eot|ttf|svg|png|jpg|gif)$/,
        loader: 'file-loader?limit=1024&name=images/[name].[ext]'
      ,
      
        test: /\.(scss|css)$/,
        include: [path.resolve(__dirname, 'app/js/src/static/scss')],
        use: ExtractTextPlugin.extract(
          publicPath: '../',
          use: [
            
              loader: 'css-loader',
              options: 
                minimize: true,
                sourceMap: false
              
            ,
            loader: 'sass-loader'
          ],
          fallback: 'style-loader'
        )
      
    ]
  ,
  plugins: [extractSass],

;

if (env === 'production' || env === 'nondev') 
  config.devtool = 'nosources-source-map';

  config.plugins.push(
    new webpack.DefinePlugin(
      'process.env': NODE_ENV: '"production"'
    )
  );

  config.plugins.push(new webpack.optimize.UglifyJsPlugin(
    compress: warnings: false,
    comments: false,
    sourceMap: false,
    minimize: false
  ));


module.exports = config;

【问题讨论】：

您应该接受提交的答案或解释为什么它不适合您

【参考方案1】：

解决方案取决于您要构建的应用程序的类型。通常前端和后端 JavaScript 代码是分开打包的，有效地创建了两个输出包。

前端

对于前端/Web 项目，将 socket.io client 库添加到您的应用程序包中。无需包含任何节点依赖项 (fs) 或模拟条目，如 node: fs:'empty' 。您可以选择target:'web' 或将其省略，因为它是默认设置。

后端

选择target:'node' 并安装socket.io server 库。您不需要指定externals: ["fs"]，如另一个答案所示，因为target: 'node' 将负责不捆绑path、fs 和其他内置模块。

最好避免npm i fs - 这是一个不必要的逃生舱口和安全风险。已经发生过使用通用包名的恶意 npm 包的案例。

您甚至可以考虑是否需要一个节点后端包。另一种方法是安装webpack-node-externals，它将所有或特定的npm包视为"externals"并将它们从捆绑包中排除：

var nodeExternals = require('webpack-node-externals');

module.exports = 
  target: 'node', // ignore built-in modules like path, fs, etc.
  externals: [nodeExternals()], // ignore all modules in node_modules folder
  // ...
;

这对后端来说很有意义，因为所有依赖项都在服务器启动时安装在 node_modules 中，并且不需要包含在包中。

从加载器中排除文件

要从某些加载器及其转换中排除文件，您可以使用exclude 模块规则。一个例子是从babel-loader 转换中省略node_modules：

 test: /\.(jsx|js)$/, exclude: /node_modules/, loader: "babel-loader" 

Further reading

【讨论】：

这是一个更好的解决方案！

对于任何有兴趣在浏览器中加载 socket.io 的人来说，解决方案是使用不需要 fs 的 socket.io-client 模块

【参考方案2】：

只需安装 fs (npm i fs)，然后在你的 webpack 配置中添加

externals: ["fs"],

【讨论】：

fs 默认不可用吗？为什么npm i fs？

当 webpack 尝试检索 socket.io 模块并在当前 socket.io 目录中搜索所需的库时发生此错误。如果你没有在当前项目目录下安装 fs，你应该安装它。

不确定这样做是否安全。来自 NPM 的注释：“这个包名当前没有被使用，但以前被另一个包占用。为了避免恶意使用，npm 挂在包名上，但是松散的，如果你，我们可能会给你想要。”

IMO 最佳工作答案，因为它不需要加载节点。

不再工作“未捕获的 ReferenceError：fs 未在 eval 中定义（外部“fs”？a40d:1）”

【参考方案3】：

如果有人仍然遇到此问题，您可以尝试以下解决方法。更新您的 webpack 文件以包含以下配置：

node: 
    fs: 'empty',

我们在项目中遇到了类似的问题，添加此特定配置解决了 webpack 中与“fs”相关的错误。 还值得检查 Webpack 版本的版本。我们不得不将 webpack 和 webpack cli 版本分别恢复为 4.0.0 和 4.2.0。