MERN项目部署前端至Node环境时JSDOM引发Webpack兼容问题求助

我有一个MERN项目，部署前端到服务器时需要让前端代码在Node环境运行，过程中遇到以下问题：

问题一：浏览器环境代码直接在Node运行报错 #

执行命令：

node ./build/static/js/index.js

报错信息：

Error: Automatic publicPath is not supported in this browser
    at file://Users/123/JAN30/123reporter/front/dashboard/build/static/js/index.js:2:249085
    at file://Users/123/JAN30/123reporter/front/dashboard/build/static/js/index.js:2:249226
    at /Users/123/JAN30/123reporter/front/dashboard/build/static/js/index.js:152:80876
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async loadESM (node:internal/process/esm_loader:91:5)
    at async handleMainPromise (node:internal/process/esm_loader:91:5)

Node.js v18.12.1

这个报错符合预期，因为前端代码是为浏览器环境编写的，直接在Node运行会缺少DOM相关环境。于是尝试用jsdom模拟DOM，修改src/index.tsx代码如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
import { JSDOM } from "jsdom";
const dom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>');
(global as any).window = dom.window;
global.document = dom.window.document;
const root: ReactDOM.Root = ReactDOM.createRoot(
  window.document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

问题二：添加jsdom后出现fs模块找不到报错 #

修改代码后构建，报错：

Module not found: Error: Can't resolve 'fs' in '/Users/123/JAN30/123reporter/front/dashboard/node_modules/jsdom/lib'

于是在webpack.config.js的module.exports中添加配置：

node: {
  fs: "empty",
},

问题三：配置fs后又出现path模块找不到报错 #

重新构建后，新报错：

Module not found: Error: Can't resolve 'path' in '/Users/123/JAN30/123reporter/front/dashboard/node_modules/jsdom/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

按提示在webpack配置中添加fallback：

resolve: {
  extensions: [".tsx", ".ts", ".js"],
  fallback: {
    path: require.resolve("path-browserify"),
  },
},

安装path-browserify后问题依旧，改为path: false也没用。

当前webpack配置 #

const path = require("path");
const webpack = require("webpack");
const dotenv = require("dotenv");
dotenv.config();

module.exports = {
  entry: {
    index: "./src/index.tsx",
  },
  mode: "production",
  node: {
    fs: "empty",
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: "ts-loader",
            options: {
              compilerOptions: { noEmit: false },
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "css-loader",
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    fallback: {
      path: require.resolve("path-browserify"),
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(dotenv.config().parsed),
    }),
  ],
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "build/static/js"),
  },
};

核心思路：拆分jsdom与前端打包流程 #

你当前的错误在于把Node环境专属的jsdom和前端代码一起用webpack打包，而webpack是为浏览器环境构建代码的，无法兼容jsdom依赖的大量Node核心API。正确做法是在Node端单独写脚本，用jsdom加载打包好的前端代码，而非将jsdom整合到前端构建中。

具体步骤：

1. 恢复src/index.tsx的原始代码（移除所有jsdom相关内容），正常打包前端：

// 恢复后的src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';

const root: ReactDOM.Root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. 在项目根目录创建Node运行脚本server-run.js：

const { JSDOM } = require('jsdom');
const fs = require('fs');
const path = require('path');

// 读取打包后的基础HTML文件
const htmlContent = fs.readFileSync(path.resolve(__dirname, 'build/index.html'), 'utf8');
const dom = new JSDOM(htmlContent, {
  runScripts: 'dangerously', // 允许执行打包后的前端脚本
  resources: 'usable' // 允许加载静态资源
});

// 模拟浏览器全局环境
global.window = dom.window;
global.document = dom.window.document;
global.navigator = dom.window.navigator;

// 加载打包后的前端JS文件
const jsPath = path.resolve(__dirname, 'build/static/js/index.js');
require(jsPath);

// 可在这里做后续操作，比如获取渲染后的完整HTML
console.log('页面渲染完成，渲染结果:', dom.serialize());

3. 安装依赖（未安装的话）：

npm install jsdom --save-dev

4. 运行Node脚本：

node server-run.js

额外优化：如果是做SSR，用React官方方案 #

如果你的需求是服务器端渲染（SSR），没必要用jsdom模拟浏览器，React官方提供了更高效的react-dom/server方案：

// server-ssr.js
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./src/components/App').default;

// 直接将React组件渲染为HTML字符串
const componentHtml = ReactDOMServer.renderToString(
  React.createElement(React.StrictMode, null, React.createElement(App))
);

// 拼接成完整HTML返回
const finalHtml = `
<!DOCTYPE html>
<html>
<head>
  <title>MERN SSR</title>
</head>
<body>
  <div id="root">${componentHtml}</div>
  <script src="/static/js/index.js"></script>
</body>
</html>
`;

console.log(finalHtml);

这种方式无需依赖jsdom，性能更优，是MERN项目SSR的标准方案。

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