ReferenceError：文档未定义（React SSR，Webpack）答案

【问题标题】：ReferenceError: document is not defined (React SSR, Webpack)ReferenceError：文档未定义（React SSR，Webpack）
【发布时间】：2020-06-20 13:39:02
【问题描述】：

我正在尝试对我的 react 应用程序进行服务器端渲染，但它不起作用。它显示 document 在尝试运行时未定义。此错误仅在我在 app.js 文件中使用 CSS 文件时显示。虽然客户端渲染工作正常。

//My App.js
import React from 'react';
import { renderRoutes } from 'react-router-config';
import ErrorBoundary from './validation/ErrorBoundry';
import './assets/css/bootstrap.min.css';
import './assets/scss/main.css';

const App = ({ route }) => {
  return (
    <div className="App">
        <ErrorBoundary>{renderRoutes(route.routes)}</ErrorBoundary>
    </div>

  );
};
export default App;


//webpack.base.js

module.exports = {
    module: {
        rules: [
          { 
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          },
          {
            test: /\.css$/,
            use: [
              'style-loader',
              'css-loader',
            ],
          }
        ]
    },
}

error screenshot

【问题讨论】：

如果你的 bundler 是 webpack，你不需要在源代码中导入 css 文件。阅读 webpack 或 css 供应商文档。
这能回答你的问题吗？ Reactjs: document is not defined

标签： node.js reactjs webpack server-side-rendering

【解决方案1】：

文档对象是 HTML 文档的根节点。此对象在节点应用程序中不存在。而在node应用中的处理方式可以使用jsdom来完成。

jsdom 是许多 Web 标准的纯 JavaScript 实现，尤其是用于 Node.js 的 WHATWG DOM 和 HTML 标准

出现这个错误是因为，Webpack 将 CSS 转换为以下代码：

var css_main_css = document.createElement("style");
css_main_css.innerHTML = "*css*";
document.querySelector("head").appendChild(css_main_css);

【讨论】：

如何使用jsdom进行服务端渲染，能否给我一个sn-p代码。