0
654
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
10 Respuestas
Responde la pregunta0
Mmm, creo que el problema está en tu babel, prueba esto:
- npm i --save-dev @babel/plugin-proposal-class-properties
- agregue suelto: verdadero en su babelrc
0
Rehice mi proyecto desde cero y me di cuenta de que me equivoqué al no incluir la "D" al final del comando:
yarn add webpack-dev-server -D¡Ahora funciona!
0
dentro del archivo webpacker.yml si usa reaccionar con rieles, agregue la extensión jsx.
extensions: - .jsx - .mjs - .js - .sass - .scss - .css - .module.sass - .module.scss - .module.css - .png - .svg - .gif - .jpeg - .jpg0
Simplemente cree un archivo .babelrc en la raíz de su proyecto y agregue:
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }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" ] }0
La solución que funcionó para mí fue cuando descubrí que node_modules/react-scripts/config/webpack.config.js contenía:
// @remove-on-eject-begin babelrc: false, configFile: false, Al configurar babelrc: true, finalmente pude hacer que los cambios de .babelrc funcionaran. Supongo que el parámetro configFile: es lo que necesitará cambiar. (Tenga en cuenta que babelrc parece necesitar ingresar a src/ para que los scripts de reacción lo encuentren, lo que es razonablemente probable que también sea cierto para babel.config.js).
0
Otra posible causa más. Recibí este error cuando intenté ejecutar un proyecto en un símbolo del sistema en una ruta que incluía enlaces simbólicos. Cambiar el directorio directamente a la ruta real resolvió el problema.
0
En mi paquete.json, agregué:
"babel": { "presets": [ "@babel/react", "@babel/env" ], "plugins": [ "@babel/proposal-class-properties", "@babel/plugin-transform-runtime" ] }0
2021
Lo arreglé agregando
"jsx": "react-jsx"a mis "opciones de compilación " en mi archivo tsconfig.json
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'] }, },