javascript - 带有 React : Unexpected token '<' in call to renderToString() 的 SSR

Question

我正在使用 React 处理 SSR，但遇到以下错误。
语法错误:意外的标记 '<'`

 <div id="root">${ReactDOMServer.renderToString(<App />)}</div>```
                                                ^

提到的是here

babel-register doesn't process the file it is called from.

因此，我正确地在一个新文件中声明了我的 babel 依赖项，但是我仍然遇到上述错误。

下面是我的index.js文件

import babelRegister from '@babel/register';
import ignoreStyles from 'ignore-styles';

babelRegister({
  ignore: [/node_modules/],
  presets: ['@babel/preset-env', '@babel/preset-react'],
});

import express from 'express';
import appRender from './server.js';

const app = express();
appRender(app);

我的 server.js 文件。

import initialRenderRoutes from './routes/initialRenderRoutes.js';
import path from 'path';

const appRender = (app) => {
  const __dirname = path.resolve();

  app.use(express.static(path.resolve(__dirname, '../build')));

  app.use('*', initialRenderRoutes);

  const port = 5000;

  app.listen(port, () => console.log(`Server running on port ${port}`));
};
export default appRender;

我的 initialController.js 文件

import fs from 'fs';
import ReactDOMServer from 'react-dom/server.js';
import path from 'path';

import App from '../../src/App.js';

const initialRenderController = (req, res, next) => {
  console.log(path.resolve());
  fs.readFile(
    path.resolve('../client/build/index.html'),
    'utf8',
    (err, data) => {
      if (err) {
        console.log(err);
        return res.status(500).send('Internal Server Error');
      }
      return res.send(
        data.replace(
          '<div id="root"></div>',
          `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
              <<<<The problem lies here>>>>
        )
      );
    }
  );
};

export default initialRenderController;

是不是和babel有关的，求助

Answer 1

尝试在您的 index.js 文件中进行以下更改，

require('ignore-styles');

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

require('./server');
require('./initialController');

上面的应该可以工作，我在本地测试了下面的，它工作得很好。

我的server.js

import express from 'express';
import fs from 'fs';
import path from 'path';

import React from 'react';
import ReactDOMServer from 'react-dom/server';

import App from '../App';

const app = express();

app.use('^/$', (req, res, next) => {

    fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => {
        if (err) {
            console.log(err);
            return res.status(500).send("Some error occurred")
        }
        return res.send(data.replace('<div id="root"></div>', `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`))
    })
});

app.use(express.static(path.resolve(__dirname, "..", "build")));

app.listen(5000, ()=>{
    console.log("App running on port 5k")
})

索引.js

require('ignore-styles');

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

require('./server');

我希望你有包含所需预设的 .babelrc 文件。

响应评论更新:

考虑删除 type: "module"，因为当您使用 require 时它会抛出错误。 @babel/register 将使用 babel 在 fly 上运行文件。 require 钩子(Hook)会将自己绑定(bind)到 Node 的 require 上，并会在运行时 自动编译文件。如果您删除 type: "module"，使用 es 模块的 server.js 不会发生冲突。 require 的顺序很重要，我们需要在 index.js 中注册 babel-register，其中包含识别 then-required 服务器中的语法所需的预设.js.