[英]Resolving JSX syntax error when using CRA (create react app)
我正在尝试在 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}`);
});
您缺少声明@babel/preset-react
预设。 将其他配置包含在您的.babelrc
文件中:
{
"presets": [
"@babel/preset-react",
...
]
}
确保你有作为你的 devDependency:
npm i -D @babel/preset-react
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.