Question

我正在尝试在服务器端渲染我的react应用程序，但是它不起作用。它显示文档在尝试运行时未定义。仅当我在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

Answer 1

文档对象是HTML文档的根节点。节点应用程序中不存在该对象。可以使用jsdom完成在节点应用程序中处理它的方法。

jsdom是许多网络标准的纯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);

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

1 个答案: