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

Question

I'm trying to do server-side rendering my react app but it doesn't work. It shows document not define when trying to run. This error only shows when I used CSS file in app.js file. Though client-side render working properly.

 //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

The document object is the root node of the HTML document. This object does not exist in node application. And the way to handle it in node application can be done by using jsdom .

jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js

That mistake happens because, Webpack transforms the CSS to the following code:

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