React应用中无法解析“fs”及express依赖表达式问题求助

嘿，我看你这两个问题本质上都是前端环境和Node.js后端环境不兼容导致的，咱们一步步来搞定：

问题1：无法解析“fs”模块 #

fs是Node.js专属的文件系统核心模块，浏览器里根本没有这个东西，Webpack默认会尝试打包所有你引入的模块，自然就会报错找不到它。

解决方案 #

在你的webpack.config.js里添加node配置项，告诉Webpack不要处理这些Node核心模块：

const path = require("path")
module.exports = {
  entry: "./app/Main.js",
  output: {
    publicPath: "/",
    path: path.resolve(__dirname, "app"),
    filename: "bundled.js"
  },
  mode: "development",
  devtool: "source-map",
  // 新增的node配置
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty' // 如果后续还有其他Node核心模块报错，都可以按这个格式添加
  },
  devServer: {
    port: 3000,
    contentBase: path.join(__dirname, "app"),
    hot: true,
    historyApiFallback: { index: "index.html" }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "12" } }]]
          }
        }
      }
    ]
  }
}

问题2：Express的Critical Dependency警告 #

从调用栈能明确看到：你在前端组件HeaderLoggedIn.js里引入了express！但Express是后端用的Web框架，完全不应该出现在前端代码里。它内部有动态依赖的写法，Webpack没办法静态分析，而且浏览器环境也跑不起来Express，这就是警告的根源。

解决方案 #

1. 打开HeaderLoggedIn.js，删掉所有require('express')或者import express from 'express'的代码
2. 如果你是想在前端发起HTTP请求，别用Express，改用前端专用的工具，比如原生fetch或者axios这类库

另外，顺带提一句你的Babel配置：preset-env的targets设为node: "12"是给后端Node.js代码用的，前端代码应该针对浏览器，建议改成：

presets: [
  "@babel/preset-react",
  ["@babel/preset-env", {
    targets: "> 0.25%, not dead" // 覆盖绝大多数现代浏览器
  }]
]

调整完这些，重新跑项目应该就能解决这两个问题了！

内容的提问来源于stack exchange，提问作者Rohan Saka