Webpack & Babel：React 组件的服务器端渲染“Unexpected token '<'”

Question

我已经调查此问题 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 访问 /login。

我做错了什么？

我正在使用最新版本的 Express、React、React Router 和 Node。我的操作系统是 Windows 7。

提前致谢

Answer 1

我想我知道这里有什么问题。

您确实编译了您的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 获得启发的示例

这应该可以解决您的问题