SyntaxError：节点中的意外标记“<”答案

【问题标题】：SyntaxError: Unexpected token '<' in NodeSyntaxError：节点中的意外标记“<”
【发布时间】：2021-09-03 13:50:46
【问题描述】：

我只是尝试在 Node 中设置 SSR，但是当我尝试将 React 组件导入服务器时，我收到此错误：

SyntaxError: Unexpected token '

尝试在package.json 中包含"type": "module"，但没有任何改变。这是我的server.js 文件：

const express = require("express");
const mongoose = require('mongoose');
const path = require("path");
import ReactDOMServer from 'react-dom/server';

import Home from './client/src/Home';

const port = process.env.PORT || 5000;
const app = express();
const { API_VERSION } = require('./config');

// Load routings
const userRoutes = require("./routers/user");
const postRoutes = require("./routers/post");
const commentsRoutes = require("./routers/comment");
const policyRoutes = require("./routers/policy");

app.use(express.urlencoded({ extended: true}));
app.use(express.json());

const uri = "MONGO_URL"
mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true }, (err, res) => {
  if (err) {
    throw err;
  } else {
    console.log("Connected to DB!.");
  }
})

// Configue http
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header(
        "Access-Control-Allow-Headers",
        "Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method"
    );
    res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
    res.header("Allow", "GET, POST, OPTIONS, PUT, DELETE");
    next();
});

app.use(`/api/${API_VERSION}`, userRoutes);
app.use(`/api/${API_VERSION}`, postRoutes);
app.use(`/api/${API_VERSION}`, commentsRoutes);
app.use(`/api/${API_VERSION}`, policyRoutes);

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
}

app.use(express.static('./build'));

app.get('/', (req, res) => {
  const home = ReactDOMServer.renderToString(<Home />); //THIS IS THE LINE THAT THROWS THE ERROR

  const indexFile = path.resolve('./build/index.html');
  fs.readFile(indexFile, 'utf8', (err, data) => {
    if (err) {
      console.error('Something went wrong:', err);
      return res.status(500).send('Oops, better luck next time!');
    }

    return res.send(
      data.replace('<div id="root"></div>', `<div id="root">${home}</div>`)
    );
  });
});

app.listen(port, () => {
  console.log(`Servidor funcionando en el puerto ${port}`)
})

Webpack 配置：

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: './server.js',

  target: 'node',

  externals: [nodeExternals()],

  output: {
    path: path.resolve('server-build'),
    filename: 'index.js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  }
};

Babel 配置：

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

【问题讨论】：

标签： node.js express

【解决方案1】：

您不能同时使用 import 和 require。它们使用不同的模块系统，使用 require(CommonJS) 或 import(ES6)。

此外，您需要将 react 导入更改为 require ，如下所示：

const ReactDOMServer = require('react-dom/server');
const Home = require('./client/src/Home'); // give the correct path

另外，你应该更改 package.json 中的内容，删除 "type":"module"。

【讨论】：