我正在尝试使用express.js设置redux服务器端渲染。 我已经完成了设置,但当express在浏览器上呈现页面时,我看到以下错误:
bundle.js文件中的Uncaught SyntaxError: Unexpected token <。我发现,在源选项卡中,bundle.js具有HTML代码,而不是我的webpack构建编译js代码。 我认为这是导致错误的问题。
以下是一些文件,可以帮助找出我的错误所在。 服务器 index.js。
请告知我是否需要提供其他相关信息。非常感谢!
bundle.js文件中的Uncaught SyntaxError: Unexpected token <。我发现,在源选项卡中,bundle.js具有HTML代码,而不是我的webpack构建编译js代码。 我认为这是导致错误的问题。
以下是一些文件,可以帮助找出我的错误所在。 服务器 index.js。
'use strict';
import express from 'express';
import webpack from 'webpack';
import path from 'path';
import config from '../webpack.config.js';
import open from 'open';
import chalk from 'chalk';
import bodyParser from 'body-parser';
import handleRender from '../client/src/utils/handleRender.js';
const port = 3000;
const app = express();
webpack(config).run((err, results) => {
console.log(err);
console.log(results);
});
app.use(bodyParser.json());
app.use(handleRender);
// Trigger server
app.listen(port, function(err) {
if (err) {
console.log(chalk.red("Whoa!!! Server crashed..."), err);
} else {
console.log(chalk.green("YAY!!! Server is up and running..."));
// open(`http://localhost:${port}/home`);
}
});
renderFullPage.js
'use strict';
function renderFullPage(html, preloadedState) {
return `
<!doctype html>
<html>
<head>
<title>Redux Universal Example</title>
</head>
<body>
<div id="root">${html}</div>
<script>
// WARNING: See the following for security issues around embedding JSON in HTML:
// http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
</script>
<script type=text/javascript src="../../../build/bundle.js"></script>
</body>
</html>
`
}
export default renderFullPage;
handleRender.js
'use strict';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import renderFullPage from './renderFullPage.js';
import App from '../containers/App.js';
import rootReducer from '../reducers';
const handleRender = (req, res) => {
// Create a new Redux store instance
const store = createStore(rootReducer);
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<App />
</Provider>
);
// Grab the initial state from our Redux store
const preloadedState = store.getState();
// Send the rendered page back to the client
res.send(renderFullPage(html, preloadedState));
}
export default handleRender;
请告知我是否需要提供其他相关信息。非常感谢!