文檔未定義，反應 ssr

Question

我正在使用 React 並使用節點進行服務器端渲染，但是當我運行我的 server.js 文件時，我收到此錯誤，指出未定義文檔。 在這里我知道在瀏覽器中不存在節點文檔，我應該怎么做才能解決這個錯誤？

這是我的 WEBPACK.SERVER.JS 文件

const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
    entry: './server/index.js',
    target: 'node',
    externals: [nodeExternals()],
    output: {
      path: path.resolve('server-build'),
      filename: '[name].js',
      chunkFilename: '[id].[chunkhash].js'

},
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(jpg|png|gif|woff|woff2|eot|ttf|svg)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            }
        }
    ]
},
resolve: {
    extensions: ['.js', '.jsx', '*']
},
optimization: {
    splitChunks: {
        cacheGroups: {
            vendor: {
                test: /node_modules/,
                name: 'vendor',
                chunks: 'initial',
                enforce: true
            }
        }
    }
}

}

這是我遇到的錯誤

[nodemon] 開始node./server-build/main.js webpack://frontend/./node_modules/style-loader/dist/runtime/insertStyleElement.js?:5

var element = document.createElement("style"); ^

ReferenceError: document is not defined at Object.insertStyleElement (webpack://frontend/./node_modules/style-loader/dist/runtime/insertStyleElement.js?:5:17) 在 Object.domAPI (webpack://frontend/. /node_modules/style-loader/dist/runtime/styleDomAPI.js?:59:30)
在 addElementStyle (webpack://frontend/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.

Answer 1

您有 3 個選擇：

1. 如果要更改 DOM 元素，請將代碼移至客戶端。 因為文檔涉及 web 瀏覽器中的 DOM（文檔 Object 模型）。

2. 使用像jsdom這樣的外部庫。

3. 使用像browserify這樣的東西在你的客戶端代碼中包含 Node.js 模塊（在你的情況下不推薦）。