Я работаю над этим уже два дня. Просматривал несколько сообщений в стеке и до сих пор не нашел подходящего ответа.
Я пытаюсь отобразить свой реактивный проект на сервере следующим образом:
Server.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>
`
}
Client.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, и кто-то упомянул, что он столкнулся с проблемой с веб-пакетом, но тот же проект хорошо работал с browserify.
Что мне нужно помочь с : я пытаюсь решить эту проблему, так как это приводит к сбою приложения.
Я подозреваю, что с веб-пакетом что-то не так. Я ищу исправление для этого