如何解决错误：“jsx”当前未启用
我是第一次接触反应。我读过类似的错误帖子，Syntax Error: Support for the experimental syntax 'jsx' isn't currently enabled，但无法解决我的问题
当我运行npm run dev时
我有个错误
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: -..../frontend/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (40:7):
38 | render() {
39 | return (
> 40 | <ul>
| ^
41 | {this.state.data.map(contact => {
42 | return (
43 | <li key={contact.id}>
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.我读了这篇文章Add @babel/预设反应，但我不明白我该怎么做
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};index.js
import React, { Component } from 'react';
import { render } from "react-dom";
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
loaded: false,
placeholder: "Loading"
};
}
componentDidMount() {
fetch("api/lead")
.then(response => {
if (response.status > 400) {
return this.setState(() => {
return { placeholder: "Something went wrong!" };
});
}
return response.json();
})
...回答 3
Stack Overflow用户
发布于 2021-03-01 18:52:50
首先，您需要运行npm install --save-dev @babel/preset-react。
这将安装@babel/preset-react包并将其添加到您的package.json文件中。
然后，您需要在您的.babelrc文件夹中创建一个src文件，并在其中粘贴以下内容：
{
"presets": ["@babel/preset-react"]
}在此之后，您可以再次运行npm run dev。
Stack Overflow用户
发布于 2021-10-21 04:23:29
对我来说，这个https://stackoverflow.com/a/52693007/10952640解决了。
TL;DR:您必须将@ babel /预设-react安装为devDep，并安装在babel和weback上。
一个react应用程序被转换成一个使用Babel的“常规”javascript，并使用Webpack绑定到一个js文件中。你必须设置一个“预设”，@babel/预设- React，让那些理解反应结构的人。
因此，正如Dan所说，您必须首先安装预设。
然后必须在.babelrc上启用它(或其他用于babel的格式)。我的整个.babelrc：
{
"presets": ["@babel/preset-env", **"@babel/preset-react**"]
}最后，还必须在webpack配置文件(有些省略)上设置它：
(...)
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['@babel/env', '@babel/preset-react'] },
},
(...)Stack Overflow用户
发布于 2022-09-02 08:17:26
对我来说，这也不起作用。想知道为什么预置没有被识别或工作。
{
"presets": [
"@babel/preset-react",
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-modules-commonjs",
[
"@babel/plugin-transform-runtime",
{
"corejs": 2
}
]
],
"env": {
"development": {
"plugins": [
"@babel/plugin-transform-react-jsx",
"@babel/plugin-transform-modules-commonjs"
]
},
"production": {
"plugins": ["transform-remove-console"]
}
}
}
https://stackoverflow.com/questions/66427651
复制相似问题
腾讯云开发者
