Reactjs React服务器端呈现-网页包的“样式加载程序”失败
我有一个使用Reactjs React服务器端呈现-网页包的“样式加载程序”失败,reactjs,webpack,server-side-rendering,nodemon,Reactjs,Webpack,Server Side Rendering,Nodemon,我有一个使用React和服务器端渲染的项目。对于开发，我使用webpack-w&&nodemon server.js。它将生成文件，监视任何更改以生成并监视服务器的任何更改。但这就是我在运行nodemon server.js时遇到的错误： ReferenceError: document is not defined at insertStyleElement (webpack:///./node_modules/style-loader/dist/runtime/injectStylesInt
Reactwebpack-w&&nodemon server.jsnodemon server.jsReferenceError: 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)
style loaderwebpack.config.js样式加载器时，错误就消失了。但是，如果您想绑定react
引用的css，这种方法并不理想。如何解决此错误
以下是我的档案：
index.js（将由webpack构建到server.js中，服务器端渲染）
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];
我会检查样式加载器是否可以在服务器端使用。我认为不会，因为您遇到的错误通常是脚本试图查找“文档”以在其中插入“样式”标记的情况。我会检查样式加载器是否可以在服务器端使用。我认为不会，因为您遇到的错误通常是脚本试图找到一个“文档”以在其中插入“样式”标记的情况这是否回答了您的问题？或者更确切地说是这个？嘿@segFault您建议的页面将我引导到一个同构样式加载程序库，当包含该库时，修复了错误消息。所以谢谢你！我一直在寻找解决办法。你知道我是否应该配置其他东西吗？因为我仍然看不到页面上的样式，当它被请求时..我想检查一下，我对这个库不太熟悉。这回答了你的问题吗？或者更确切地说是这个？嘿@segFault您建议的页面将我引导到一个同构样式加载程序库，当包含该库时，修复了错误消息。所以谢谢你！我一直在寻找解决办法。你知道我是否应该配置其他东西吗？因为我仍然看不到页面上的样式，当它被要求时..我想检查一下，我对这个库不太熟悉。
"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"
}
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];