我按照网站上的Material-UI指南配置了SSR,这是我的服务器端代码:
//server.js
...
...
...
const app = express();
app.use('/dist', express.static('dist'));
app.use((req, res) => {
const sheets = new ServerStyleSheets();
const html = renderToString(
sheets.collect(
<DataProvider>
<StaticRouter location={req.url}>
<MuiThemeProvider theme={theme}>
<App />
</MuiThemeProvider>
</StaticRouter>
</DataProvider>
)
);
const css = sheets.toString();
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>My React App</title>
<style id="jss-server-side">${css}</style>
</head>
<body>
<div id="root">${html}</div>
<script src='main.js' async></script>
</body>
</html>
`);
});
这是我的客户端脚本:
//client.js
...
...
...
function Main() {
React.useEffect(() => {
const jssStyles = document.getElementById('jss-server-side');
if (jssStyles) {
jssStyles.parentNode.removeChild(jssStyles);
}
}, []);
return (
<I18nextProvider i18n={i18n}>
<DataProvider>
<BrowserRouter>
<MuiThemeProvider theme={theme}>
<App />
</MuiThemeProvider>
</BrowserRouter>
</DataProvider>
</I18nextProvider>
);
}
hydrate(<Main />, document.getElementById('root'));
它可以构建,但是在访问本地主机时出现此错误:
TypeError: l.ServerStyleSheets is not a constructor
at project-path/dist/main.js:1:301839
at Layer.handle [as handle_request] (project-path/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (project-path/node_modules/express/lib/router/index.js:317:13)
at project-path/node_modules/express/lib/router/index.js:284:7
at Function.process_params (project-path/node_modules/express/lib/router/index.js:335:12)
at next (/project-path/node_modules/express/lib/router/index.js:275:10)
at expressInit (project-path/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (project-path/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (project-path/node_modules/express/lib/router/index.js:317:13)
at project-path/node_modules/express/lib/router/index.js:284:7
我正在使用
“ @ material-ui / core”:“ ^ 4.1.2”, “表达”:“ ^ 4.17.1”, “ react”:“ ^ 16.8.6”, “ webpack”:“ ^ 4.41.2”,
请帮助我解决此问题,我正在尝试将SSR添加到已完成的SPA中...