Node.js 使用CRA（创建react应用程序）时解决JSX语法错误_Node.js_Reactjs_Webpack_Server Side Rendering

Node.js 使用CRA（创建react应用程序）时解决JSX语法错误

node.js reactjs webpack

Node.js 使用CRA（创建react应用程序）时解决JSX语法错误,node.js,reactjs,webpack,server-side-rendering,Node.js,Reactjs,Webpack,Server Side Rendering,我正在尝试在React项目上设置服务器端路由。像往常一样，我使用了CRA。当我尝试从终端运行start命令时，出现如下屏幕所示的错误：有人能帮我克服这个吗？我认为问题在于我在使用CRA，因为从我所读到的内容来看，为了让我的应用程序在使用CRA时读取我的babel配置文件，我需要采取一些额外的步骤。不过我还是不太明白。这就是我的webpack.config.js文件的外观： var path = require('path') var webpack = require('webpack')

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

有人能帮我克服这个吗？我认为问题在于我在使用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}`);
});

从“React”导入React；
从“快递”导入快递；
从“cors”导入cors；
从“react dom/server”导入{renderToString}；
从“./App”导入应用程序；
常数端口=8000；
const server=express（）；
使用（cors（））；
server.use（express.static（“public”）；
server.get（“*”，（req，res，next）=>{
常量标记=renderToString（）；
res.send(`
带RR的SSR
${markup}
`);
});
服务器。侦听（端口，（）=>{
log（`Server launched on port${port}`）；
});

您缺少声明

@babel/preset react

preset。在

.babelrc

文件中包括其他配置：

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

确保您有以下作为您的依赖：

npm i -D @babel/preset-react