Webpack＆Babel：Reactコンポーネントのサーバー側レンダリング「予期しないトークン '<'」

この問題を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をトランスパイルするように指示するために、最初にを追加しましたが、何があっても失敗します。

次にreturn res.send(ReactDOMServer.renderToString(<LoginPage />));、auth.jsxを次のように置き換えました。

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にそのルートがないと、URL経由で/ loginにアクセスできないことを除いて、Webアプリはすべて正常に機能することに注意してください。

私は何が間違っているのですか？

Express、React、React Router、Nodeの最新バージョンを使用しています。私のOSはWindows7です。

前もって感謝します