我已经为此工作两天了。浏览了多个堆栈帖子，仍然没有找到合适的答案。
我正在尝试在服务器中渲染我的反应项目，如下所示：
服务器.js
function handleRender(req,res){
const sheetsRegistry = new SheetsRegistry();
const sheetsManager = new Map();
const theme = createMuiTheme({
palette:{
primary:green,
accent: red,
type: 'light',
}
})
const generateClassName = createGenerateClassName();
const html = ReactDOMServer.renderToString(
<JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
<MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
<TwoFA />
</MuiThemeProvider>
</JssProvider>
)
const css = sheetsRegistry.toString()
res.send(renderFullPage(html,css))
}
function renderFullPage(html,css){
return `
<!DOCTYPE html>
<html>
<head>
<title>2FA SDK</title>
</head>
<body style="margin:0">
<div id="app">${html}</div>
<script id="jss-server-side">${css}</script>
</body>
</html>
`
}
客户端.js：
import React from 'react';
import ReactDOM from 'react-dom';
import TwoFA from './App';
import {
MuiThemeProvider,
createMuiTheme,
createGenerateClassName,
} from '@material-ui/core/styles';
import green from '@material-ui/core/colors/green';
import red from '@material-ui/core/colors/red';
class Main extends React.Component{
componentDidMount() {
const jssStyles = document.getElementById('jss-server-side');
if (jssStyles && jssStyles.parentNode) {
jssStyles.parentNode.removeChild(jssStyles);
}
}
render(){
return <TwoFA />
}
}
const theme = createMuiTheme({
palette: {
primary: green,
accent: red,
type: 'light',
},
});
const generateClassName = createGenerateClassName();
if (typeof window !== 'undefined'){
ReactDOM.hydrate(
<JssProvider generateClassName={generateClassName}>
<MuiThemeProvider theme={theme}>
<TwoFA/>
</MuiThemeProvider>
</JssProvider>,
document.querySelector('#app'),
);
}
Webpack.config.js
module.exports = [
{
/*Config for backend code*/
entry: './src/server/server.js',
output: {
filename: 'server.js'
},
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: {
loader: "html-loader",
options: { minimize: true }
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,"css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename:"./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename:"[id].css"
})
]
},
{
entry: './src/client.js',
output: {
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.html$/,
use: {
loader: "html-loader",
options: { minimize: true }
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,"css-loader"]
}
],
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename:"./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename:"[id].css"
})
]
}
]
我尝试过的：我搜索了SO，发现很多帖子建议像这样进行条件检查：if (typeof window !== 'undefined')。然而，这并不能解决问题。
我还了解到该错误是由于在SSR期间，服务器端没有document项目。
我在 github 问题页面上搜索过，有人提到他遇到了 webpack 的问题，但同一个项目在 browserify 上运行得很好。
我需要什么帮助：我正在尝试解决这个问题，因为它会导致应用程序崩溃。
我怀疑是webpack有问题。我正在寻找解决这个问题的方法
