0
239
ViewsLa compatibilidad con la sintaxis experimental 'jsx' no está habilitada actualmente
Estoy tratando de ejecutar un código muy simple, pero recibo un error, ¡no usé la aplicación Create React!
¡Parece que mi archivo babel.config.js está siendo ignorado!
Esta es la estructura de mi pequeño proyecto: 
mi archivo html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ReactJS</title> </head> <body> <div id="app"></div> <script src = 'bundle.js' ></script> </body> </html>Mi archivo index.js:
import React from 'react'; import { render } from 'react-dom'; render(<h1>Hello World!!</h1>, document.getElementById('app'));Mi paquete json:
{ "name": "front", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "dev": "webpack-dev-server --mode development", "build": "webpack-dev-server --mode production" }, "dependencies": { "@babel/cli": "^7.10.5", "@babel/core": "^7.10.5", "@babel/plugin-proposal-class-properties": "^7.10.4", "@babel/preset-env": "^7.10.4", "@babel/preset-react": "^7.10.4", "react": "^16.13.1", "react-dom": "^16.13.1", "webpack": "^4.43.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0" }, "devDependencies": { "@babel/plugin-transform-runtime": "^7.9.0", "babel-loader": "^8.1.0", "webpack-dev-server": "^3.10.3" } }Mi webpack.config.js
const path = require('path'); module.exports = { entry: path.resolve(__dirname, 'src', 'index.js'), output: { path: path.resolve(__dirname, 'public'), filename: 'bundle.js' }, devServer: { contentBase: path.resolve(__dirname, 'public'), }, module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', } }] }, };Y este es mi babel.config.js
module.exports = { "presets": ["@babel/preset-env", "@babel/preset-react"] };error cuando
yarn webpack-dev-server --mode development ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /root/treina/front/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (4:8): 2 | import { render } from 'react-dom'; 3 | > 4 | render(<h1>Hello World!!</h1>, document.getElementById('app')); | ^ 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. at Parser._raise (/root/treina/front/node_modules/@babel/parser/lib/index.js:757:17) at Parser.raiseWithData (/root/treina/front/node_modules/@babel/parser/lib/index.js:750:17) at Parser.expectOnePlugin (/root/treina/front/node_modules/@babel/parser/lib/index.js:8849:18) at Parser.parseExprAtom (/root/treina/front/node_modules/@babel/parser/lib/index.js:10170:22) at Parser.parseExprSubscripts (/root/treina/front/node_modules/@babel/parser/lib/index.js:9688:23) at Parser.parseMaybeUnary (/root/treina/front/node_modules/@babel/parser/lib/index.js:9668:21) at Parser.parseExprOps (/root/treina/front/node_modules/@babel/parser/lib/index.js:9538:23) at Parser.parseMaybeConditional (/root/treina/front/node_modules/@babel/parser/lib/index.js:9511:23) at Parser.parseMaybeAssign (/root/treina/front/node_modules/@babel/parser/lib/index.js:9466:21) at Parser.parseExprListItem (/root/treina/front/node_modules/@babel/parser/lib/index.js:10846:18) ℹ ｢wdm｣: Failed to compile.estoy usando yarn y la terminal WSL
·
Santiago Trujillo
3 answers
Answer question0
Simplemente cree un archivo .babelrc en la raíz de su proyecto y agregue:
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
·
Santiago Trujillo
Report
0
En mi caso, funcionó la creación del archivo "babel.config.js" con el siguiente contenido.
module.exports = { presets:[ "@babel/preset-env", "@babel/preset-react" ] }
·
Santiago Trujillo
Report
0
Esto https://stackoverflow.com/a/52693007/10952640 me resolvió.
Necesita @babel/preset-react configurado también en la configuración del paquete web:
module: { rules: [ { test: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', options: { presets: ['@babel/env','@babel/preset-react'] }, },
·
Santiago Trujillo
Report
Answer question