ReferenceError：文檔未定義（React SSR、Webpack）

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', ], } ] }, }

錯誤截圖

Answer 1

文檔對象是 HTML 文檔的根節點。 該對象在節點應用程序中不存在。 在節點應用程序中處理它的方法可以通過使用jsdom來完成。

jsdom 是許多 Web 標准的純 JavaScript 實現，特別是 WHATWG DOM 和 HTML 標准，用於 Node.js

發生該錯誤的原因是， Webpack將 CSS 轉換為以下代碼：

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