Question

我正在尝试使用React和React Router进行服务器渲染。我已经设置了babel以便在客户端正确渲染jsx，但是服务器给我带来了麻烦。无论我做什么，似乎都无法识别我的jsx。

我的服务器代码如下：

require("@babel/register")({
presets: ["@babel/preset-react", "@babel/preset-env"]
});

const React = require("react");
const StaticRouter = require("react-router-dom/StaticRouter");
const ReactDOMServer = require("react-dom/server");

app.get("/*", (req, res) => {
 const context = {};
 const app = ReactDOMServer.renderToString(
   <StaticRouter location={req.url} context={context}>
     <App />
   </StaticRouter>
 );
})

我已在package.json中将babel配置为：

  "babel": {
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ]
  }

并列出所有依赖项。错误如下：

 <StaticRouter location={req.url} context={context}>
^

SyntaxError: Unexpected token <

Answer 1

Babel无法在已注册的模块上移植同一模块。

如果Babel以编程方式用作require("@babel/register")，则应该有一个入口点，其中包含与当前Node版本兼容的代码以及Babel将要处理的其他模块。

main.js

require("@babel/register")({
  presets: ["@babel/preset-react", "@babel/preset-env"]
});

require('./app');

app.jsx

const React = require("react");
...

尝试在节点中呈现JSX时出现意外令牌

1 个答案: