如何解决React服务器端渲染-Webpack的'style-loader'失败
我有一个使用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',mode: 'development',plugins: [
new webpack.DefinePlugin({
__isBrowser__: 'false',};
module.exports = [browserConfig,serverConfig];
解决方法
我将检查样式加载器是否可以在服务器端使用。我相信不会，因为您遇到的错误通常是脚本试图在文件中插入“样式”标签的脚本
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。