Question

我有一个使用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有关。确实，当我从style-loader中删除webpack.config.js时，错误消失了。但是，如果要捆绑由您的react <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];

Answer 1

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

React服务器端渲染-Webpack的'style-loader'失败

1 个答案: