反应服务器端渲染 - webpack的“样式加载器”失败答案

【问题标题】：React server side rendering - failure on `style-loader` of webpack反应服务器端渲染 - webpack的“样式加载器”失败
【发布时间】：2020-12-05 18:26:11
【问题描述】：

我有一个使用React 和服务器端渲染的项目。对于开发，我使用webpack -w && nodemon server.js。它将构建文件监视任何更改以构建和监视服务器的任何更改。但这是我在运行nodemon server.js 时遇到的错误：

ReferenceError: document is not defined
at insertStyleElement (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:93:15)
at addStyle (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:208:13)
at modulesToDom (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:81:18)
at module.exports (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:239:25)
at eval (webpack:///./src/shared/css/home-style.css?:15:14)

如您所见，该错误与我使用的 webpack style-loader 有关。事实上，当我从webpack.config.js 中删除style-loader 时，错误就消失了。但是，如果您想捆绑您的反应 <App/ > 引用的 css，这种方法并不理想。如何解决此错误？

以下是我的文件：

index.js（将由 webpack 构建到 server.js 中，由它进行服务器端渲染）

import React from 'react';
import express from 'express';
import cors from 'cors';
import { renderToString } from 'react-dom/server';
import App from '../shared/Components/App';
import serialize from 'serialize-javascript';

const app = express();

app.use(cors());

app.use(express.static('public'));

app.get('*', (req, res, next) => {
    const markup = renderToString(
        
            <App />
        
    );

    res.status(200).send(
        `<!DOCTYPE html>
        <html lang="">
        <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta charset="utf-8" />
            <title>Welcome to Banding-Bandingz</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <script src='/bundle.js' defer></script>

        </head>
        <body>
            <div id="app">${markup}</div>
        </body>
        </html>`
    );
});

app.listen(3000, () => {
    console.log('server is listening on port 3000...');
});

package.json

"scripts": {
    "start": "webpack -w && node server.js",
    "watch:server": "nodemon server.js",
    "watch:build": "webpack -w",
    "test": "echo \"Error: no test specified\" && exit 1"
},
"babel": {
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-class-properties"
    ]
},
"devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.9.0",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.1.0",
    "concurrently": "^5.3.0",
    "css-loader": "^4.2.1",
    "file-loader": "^6.0.0",
    "nodemon": "^2.0.4",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-node-externals": "^1.7.2"
},
"dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "isomorphic-fetch": "^2.2.1",
    "jsdom": "^16.4.0",
    "npm-run-all": "^4.1.5",
    "pure-react-carousel": "^1.27.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "4.4.0-beta.8",
    "serialize-javascript": "^3.0.0"
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');

var browserConfig = {
    entry: './src/browser/index.js',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: '/',
    },
    module: {
        rules: [
            { test: /\.(js)$/, use: 'babel-loader' },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(jpg|png|PNG|svg|jpe?g)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'img/',
                            publicPath: 'img/',
                        },
                    },
                ],
            },
        ],
    },
    mode: 'production',
    plugins: [
        new webpack.DefinePlugin({
            __isBrowser__: 'true',
        }),
    ],
    performance: {
        maxEntrypointSize: 512000,
        maxAssetSize: 512000,
    },
};

var serverConfig = {
    entry: './src/server/index.js',
    target: 'node',
    externals: [nodeExternals()],
    output: {
        path: __dirname,
        filename: 'server.js',
        publicPath: '/',
    },
    module: {
        rules: [
            { test: /\.(js)$/, use: 'babel-loader' },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(jpg|png|PNG|svg|jpe?g)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'img/',
                            publicPath: 'img/',
                        },
                    },
                ],
            },
        ],
    },
    mode: 'development',
    plugins: [
        new webpack.DefinePlugin({
            __isBrowser__: 'false',
        }),
    ],
    performance: {
        maxEntrypointSize: 512000,
        maxAssetSize: 512000,
    },
};

module.exports = [browserConfig, serverConfig];

【问题讨论】：

这能回答你的问题吗？ How can I use style-loader in react SSR (Server Side Rendering)?
还是这个？ 'window is not defined' error when using style-loader with webpack
嘿@segFault 你建议的页面将我引导到一个同构样式加载器库，当包含该库时，它会修复错误消息。所以谢谢你！我一直在寻找解决方案。你知道我是否应该配置其他东西吗？因为在请求时我仍然看不到页面上的样式..
我会检查the documentation for that plugin here，我对这个库不太熟悉。

标签： reactjs webpack server-side-rendering nodemon

【解决方案1】：

我会检查样式加载器是否可以在服务器端使用。我不相信，因为您得到的错误通常是您的脚本试图找到一个“文档”以在其中注入一个“样式”标签

【讨论】：