0
238
VistasLa 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 Respuestas
Responde la pregunta0
Simplemente cree un archivo .babelrc en la raíz de su proyecto y agregue:
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
·
Santiago Trujillo
Denunciar
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
Denunciar
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
Denunciar
Responde la pregunta