我正在为 CRA(create-react-app) react 项目创建 SSR 服务器。但是，当我执行“npx webpack”时出现错误。
这是我的目录树的图片。
My file directory
服务器.js
import React from 'react';
import {renderToString} from "react-dom/server";
import express from 'express';
import App from '../src/App.js';
const doc = content => `
<!doctype html>
<html>
<head>
<title>Rendering to strings</title>
</head>
<body>
<div id="app">${content}</div>
</body>
</html>`;
const app = express();
app.get('/', (req,res)=>{
const props = {
items: ['One','Two','Three']
};
const rendered = renderToString(<App {...props}/>);
res.send(doc(rendered));
})
app.listen(8080, ()=>{
console.log(`listening on localhost:8080`);
})
const path = require('path');
module.exports = {
entry: './server.js',
output: {
filename: 'app-translated.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader"
}
}
]
},
target: "node"
}
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-react-jsx"
]
}
Error Message picture
当您在 .babelrc 文件中看到插件列表时，我尝试了许多解决此问题的现有解决方案(不多)，但没有任何效果。
但是，当我将 'server' 目录中的文件与 'src' 目录中的 App.js 文件一致时，没有发生错误。我想知道发生这种情况的原因。
最佳答案
看看这里:Support for the experimental syntax 'jsx' isn't currently enabled
也许你的 package.json 有问题:
--- "main": "index.js"
+++ "main": "./build/index.js"
关于reactjs - 使用 webpack 和 babel 时，当前未启用对实验性语法 'jsx' 的支持，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62859096/