解决使用 CRA 时的 JSX 语法错误（创建 React 应用程序）

Question

我正在尝试在 React 项目上设置服务器端路由。像往常一样，我使用过 CRA。当我尝试从我的终端运行启动命令时，我收到如下屏幕所示的错误：

谁能帮我解决这个问题？我认为问题在于我正在使用 CRA，因为从我读过的内容来看，似乎我需要采取一些额外的步骤才能让我的应用程序在使用 CRA 时读取我的 babel 配置文件。不过我不太明白。这是我的 webpack.config.js 文件的样子：

var path = require('path')
var webpack = require('webpack')
var nodeExternals = require('webpack-node-externals')
var browserConfig = {
  entry: './src/browser/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
    ]
  },
  mode: 'production',
  plugins: [
    new webpack.DefinePlugin({
      __isBrowser__: "true"
    })
  ]
}
var serverConfig = {
  entry: './src/server/index.js',
  target: 'node',
  externals: [nodeExternals()],
  output: {
    path: __dirname,
    filename: 'server.js',
    publicPath: '/'
  },
  mode: 'production',
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      __isBrowser__: "false"
    }),
  ]
}
module.exports = [browserConfig, serverConfig]

这是我在服务器目录中的 index.js 文件：

import React from "react";
import express from "express";
import cors from "cors";
import { renderToString } from "react-dom/server";
import App from "../App";
const port = 8000;
const server = express();
server.use(cors());
server.use(express.static("public"));
server.get("*", (req, res, next) => {
  const markup = renderToString(<App />);
  res.send(`
  <!DOCTYPE html>
  <html>
    <head>
        <title>SSR with RR</title>
    </head>
    <body>
        <div id="app">${markup}</div>
    </body>
  </html>
  `);
});
server.listen(port, () => {
  console.log(`Server launched on port ${port}`);
});

Answer 1

您没有声明 @babel/preset-react 预设。将其他配置包含在您的 .babelrc 文件中：

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

确保你的 devDependency:

npm i -D @babel/preset-react

解决使用 CRA 时的 JSX 语法错误（创建 React 应用程序）

Resolving JSX syntax error when using CRA (create react app)

node.js

reactjs

webpack

server-side-rendering