我已经调查了这个问题3天了，但是无法让它发挥作用。
完整错误是：
C:\Users\XXXXXX\WebstormProjects\XXXX\server\routes\auth.jsx:58
return res.send(ReactDOMServer.renderToString(<LoginPage />));
^
SyntaxError: Unexpected token <
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\XXXXXX\WebstormProjects\XXXX\index.js:10:20)
这是我的webpack.config.js：
const path = require('path');
module.exports = {
entry: path.join(__dirname, '/client/src/app.jsx'),
output: {
path: path.join(__dirname, '/client/dist/js'),
filename: 'app.js',
publicPath: "/"
},
module: {
loaders: [{
test: /\.jsx?$/,
include: [
path.join(__dirname, '/client/src'),
path.join(__dirname, '/server/routes')
],
loader: 'babel-loader',
query: {
babelrc: false,
presets: ['es2015', 'stage-2', 'react']
}
}],
},
devServer: {
historyApiFallback: true
},
watch: true
};
现在是/server/routes/auth.jsx文件：
const express = require('express');
const validator = require('validator');
const router = new express.Router();
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const LoginPage = require('../../client/src/containers/LoginPage.jsx');
function validateLoginForm(payload) {
const errors = {};
let isFormValid = true;
let message = '';
if (!payload || typeof payload.email !== 'string' || payload.email.trim().length === 0) {
isFormValid = false;
errors.email = 'Please provide your email address.';
}
if (!payload || typeof payload.password !== 'string' || payload.password.trim().length === 0) {
isFormValid = false;
errors.password = 'Please provide your password.';
}
if (!payload || typeof payload.password !== 'string' || payload.password.trim().length <= 8)
{
isFormValid = false;
errors.password = 'Please provide a password that\'s more than 8 char';
}
if (!isFormValid) {
message = 'Check the form for errors.';
}
return {
success: isFormValid,
message,
errors
};
}
router.post('/login', (req, res) => {
console.log("lol");
const validationResult = validateLoginForm(req.body);
if (!validationResult.success) {
return res.status(400).json({
success: false,
message: validationResult.message,
errors: validationResult.errors
});
}
console.log("Went through validationResult without problems");
return res.status(200).end();
});
router.get('/login', (req, res) => {
console.log(req.url);
return res.send(ReactDOMServer.renderToString(<LoginPage />)); // THE PROBLEM
});
router.get('/', (req, res) => {
console.log(req.url);
console.log("lmao")
});
module.exports = router;
最后是/client/src/containers/LoginPage.jsx：
import React from 'react';
import LoginForm from '../components/LoginForm.jsx';
class LoginPage extends React.Component{
/**
* Class constructor.
*/
constructor(props) {
super(props);
// set the initial component state
this.state = {
errors: {},
user: {
email: '',
password: ''
}
};
this.processForm = this.processForm.bind(this);
this.changeUser = this.changeUser.bind(this);
}
/**
* Process the form.
*
* @param {object} event - the JavaScript event object
*/
processForm(event) {
// prevent default action. in this case, action is the form submission event
event.preventDefault();
const email = encodeURIComponent(this.state.user.email);
const password = encodeURIComponent(this.state.user.password);
const formData = `email=${email}&password=${password}`;
// create an AJAX request
const xhr = new XMLHttpRequest();
xhr.open('post', '/login');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.responseType = 'json';
xhr.addEventListener('load', () => {
if (xhr.status === 200) {
// success
// change the component-container state
this.setState({
errors: {}
});
console.log('The form is valid');
} else {
// failure
// change the component state
const errors = xhr.response.errors ? xhr.response.errors : {};
errors.summary = xhr.response.message;
this.setState({
errors
});
}
});
xhr.send(formData);
}
/**
* Change the user object.
*
* @param {object} event - the JavaScript event object
*/
changeUser(event) {
const field = event.target.name;
const user = this.state.user;
user[field] = event.target.value;
this.setState({
user
});
}
/**
* Render the component.
*/
render() {
return (
<LoginForm
onSubmit={this.processForm}
onChange={this.changeUser}
errors={this.state.errors}
user={this.state.user}
/>
);
}
}
export default LoginPage;
我首先添加path.join(__dirname, '/server/routes')以告诉Webpack和babel也搜索此文件夹以转换jsx，但无论如何都会失败。
然后我将auth.jsx中的return res.send(ReactDOMServer.renderToString(<LoginPage />));替换为：
var html = ReactDOMServer.renderToString(React.createElement(LoginPage));
return res.send(ReactDOMServer.renderToString('base', html));
但是，通过这样做，节点给了我另一个错误：
C:\Users\XXXXXX\WebstormProjects\XXXX\client\src\containers\LoginPage.jsx:1
(function (exports, require, module, __filename, __dirname) { import React from 'react';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\XXXXXX\WebstormProjects\XXXX\server\routes\auth.jsx:8:19)
这又是一个转型问题。
请注意，在auth.jsx中没有该路由，Web应用程序工作正常，但我无法通过URL访问/登录。
我做错了什么？
我正在使用最新版本的Express，React，React Router和Node。我的操作系统是Windows 7。
提前致谢
答案 0 :(得分：3)
我想我知道这里有什么问题。
您确实编译了jsx文件，webpack.config.js似乎很完美（包含react个预设，因此它应该有效。）
但是你只是在编译client，而你正试图在服务器上使用未编译的文件。
但node无法自行阅读jsx。
我在这里建议的选项，它允许babel也编译服务器端文件。
为此，您可以使用babel-cli。
只需在package.json
"scripts": {
"start": "babel-node index.js --presets es2015,react"
}
然后开始像这样的服务器
npm start
然后它应首先使用babel编译文件并启动服务器。
以下是您可以从https://github.com/babel/example-node-server
启发的示例这应该可以解决您的问题