Node.js 网页及；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)

现在打开/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;

但是，通过这样做，node给了我另一个错误，即：

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)

C:\Users\XXXXXX\webstoreprojects\XXXX\client\src\containers\LoginPage.jsx:1
（函数（导出、要求、模块、_文件名、_目录名）{import React from'React'；
^^^^^^
SyntaxError:意外的令牌导入
在createScript上（vm.js:56:10）
在Object.runInThisContext（vm.js:97:10）
在模块处编译（Module.js:542:28）
在Object.Module.\u extensions..js（Module.js:579:10）
在Module.load（Module.js:487:32）
在tryModuleLoad时（module.js:446:12）
在Function.Module.\u加载（Module.js:438:3）
at Module.require（Module.js:497:17）
根据需要（内部/module.js:20:19）
at对象。（C:\Users\XXXXXX\WebstormProjects\XXXX\server\routes\auth.jsx:8:19）

这也是一个运输问题

请注意，如果auth.jsx中没有该路由，web应用程序可以正常工作，只是我无法通过URL访问/登录

我做错了什么

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

---

提前谢谢

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

您确实编译了

jsx

文件，您的

webpack.config.js

看起来非常完美（它包括

react

预设，因此应该可以工作）

但您似乎只是在为

客户机编译
，并且您正试图使用服务器上未编译的文件

但是
节点
无法单独读取
jsx

我在这里建议的选项是允许babel也编译服务器端文件

为此，可以使用
babel cli

只需将其添加到您的
包.json

"scripts": {
  "start": "babel-node index.js --presets es2015,react"
}

然后像这样启动服务器

npm启动

然后它应该首先用
babel
编译文件并启动服务器

下面是一个你可以从中得到启发的例子

这应该可以解决您的问题
您显示的是
webpack.config.js
，而不是
package.json
，不是吗？@atomrc-ups，更正。谢谢：）可能是因为.jsx文件包含Web包无法包含的非es2015代码read@KrunalLimbad这不是巴贝尔的工作，将ES6代码传输到网页可以阅读的东西吗？是的，没错，但是，看我的评论，我说你给的网页不是ES6代码谢谢你的回答。你发布的代码的第二部分确实解决了第一个问题，w这是我更新我的答案的
意外标记。此解决方案应该可以在不更改任何源文件中的任何位的情况下解决您的两个问题：）很抱歉出现双重注释，但尝试安装node jsx，但仍然出现相同的错误，但编写方式不同：
错误转换C:\Users\XXXXXX\WebstormProjects\XXXX\client\src\components\LoginPage.jsx to JS:Error:Parse Error:Line 1:非法导入声明
，让我感觉这个错误是由我的代码引起的，但不管我读了多少遍，我都找不到错误在哪里..不，确实，这个解决方案没有考虑到导入
部分。我的更新答案应该可以解决这个问题哦，你仍然可以使用
nodemon
：）
nodemon--use_stict index.js--exec babel node--presets es2015，react
：）
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)

"scripts": {
  "start": "babel-node index.js --presets es2015,react"
}