Así que he buscado sin cesar en la web para solucionar este problema.
"support for the experimental 'jsx' isn't currently enabled... Add @babel/preset-react to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx to the 'plugins' section to enable parsing."Así que tenía toneladas (como 100) de estos como errores, así que modifiqué mi .babelrc y .babel.config.js para que se vean así:
{ test: /\.jsx?$/, exclude: [/node_modules/], use: [ { loader: 'babel-loader', options: { presets: [ '@babel/preset-env', '@babel/preset-react',{ 'plugins': [ ["@babel/plugin-proposal-class-properties", { "loose": true }] ]}] } }]}y la configuración:
"presets": [ "react", "@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react" ], "plugins": [ [ "@babel/plugin-proposal-class-properties", { "loose": true } ], [ "@babel/plugin-transform-runtime", { "regenerator": true } ] ]Lo que resolvió la mayoría de estos errores.
Sin embargo, sigo viendo este mismo error para 5 archivos -> no hay diferencias notables entre estos 5 archivos y los 100 que arrojaban exactamente los mismos errores antes.
Siguiendo el consejo de otras respuestas de desbordamiento de pila e Internet, cambié mi .babelrc y config.js:
{ test: /\.jsx?$/, exclude: [/node_modules/], use: [ { loader: 'babel-loader', options: { presets: [ '@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript',{ 'plugins': [ ["@babel/plugin-proposal-decorators", { "legacy": true }], "@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-regenerator", ["@babel/plugin-transform-runtime", {helpers: false, regenerator: true}], ["@babel/plugin-proposal-class-properties", { "loose": true }] ]}] } }]}y la configuración:
"presets": [ "react", ["@babel/preset-env", { "targets": { "esmodules": true, "node" : "current" }, } ], "@babel/preset-typescript", "@babel/preset-react" ], "plugins": [ [ "@babel/plugin-proposal-class-properties", { "loose": true } ], [ "@babel/plugin-transform-runtime", { "regenerator": true } ] ]Probé muchas combinaciones diferentes de estos paquetes, agregando uno cada vez para ver si creaba o cambiaba algo y nada cambió. También intenté agregar @babel/plugin-syntax-jsx a los complementos, pero tampoco pareció funcionar.
También intenté tener los paquetes @babel en .babelrc, pero tampoco funcionó.
¿Hay algún otro paquete que pueda intentar incluir o usar? ¿O configuraciones para los paquetes que podrían cambiarlo para estos archivos?
EDITAR: las dependencias de package.json incluyen:
"@babel/runtime": "^7.10.4", "@babel/cli": "^7.10.4", "@babel/core": "^7.10.4", "@babel/plugin-proposal-class-properties": "^7.10.4", "@babel/plugin-proposal-decorators": "^7.10.4", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-jsx": "^7.10.4", "@babel/plugin-transform-runtime": "^7.10.4", "@babel/preset-env": "^7.10.4", "@babel/preset-react": "^7.10.4", "@babel/preset-typescript": "^7.10.4", "core-js": "^3.6.5", "react": "^16.0.0", "react-dom": "^16.0.0",¿Está ejecutando esto dentro de una carpeta node_modules? si es asi tienes que cambiar
exclude: [/node_modules/],por lo que no excluye su proyecto.
Debería convertirse en algo a lo largo de las líneas de
exclude: [/node_modules/ && !/node_modules\/(project_name)/],Pero con la sintaxis de expresiones regulares correcta y cambie project_name al nombre de la carpeta.
Debo haber probado toneladas de maneras diferentes. Compartiendo lo que funcionó para mí. Tome nota de las versiones, las diferentes versiones pueden necesitar ajustes.
Mi proyecto de reacción se creó usando create-react-app (CRA). Ahora que CRA oculta los archivos de configuración de babel y webpack y no hay forma de modificarlos, hay básicamente 2 opciones:
También usé custom-cra . React-app-rewired lo sugiere para versiones posteriores de CRA.
Actualice los scripts y agregue dependencias de desarrollo en package.json:
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject", "docs": "jsdoc -c jsdoc.conf.json" }, "devDependencies": { "@babel/plugin-proposal-class-properties": "^7.10.1", "customize-cra": "^1.0.0", "react-app-rewired": "^2.1.6", "@babel/preset-react": "^7.10.1" }config-overrides.js (debe estar en el nivel raíz, es decir, en el mismo nivel de directorio que el paquete.json).
Si el error proviene de alguna biblioteca en node_modules, asegúrese de 'incluirlo' ( babelInclude ):
const path = require('path'); const { override, babelInclude, addBabelPreset, addExternalBabelPlugin, } = require('customize-cra'); module.exports = override( babelInclude([ path.resolve('src'), path.resolve('node_modules/react-native-animatable'), ]), addBabelPreset("@babel/preset-react"), addExternalBabelPlugin('@babel/plugin-proposal-class-properties'), );Crear un babel.config.js con este script resuelve mi problema
module.exports = { presets:[ "@babel/preset-env", "@babel/preset-react" ] }Esto es difícil para nosotros, los ingenieros de back-end que recién comenzamos con React, iterando en los 3 o 4 años de soluciones alternativas de la comunidad para problemas fundamentales con create-react-app . Después de toda una semana de encuentros sin salida con paquetes obsoletos y consejos, aprendí que resulta que no es necesario volver react-app-rewired en absoluto.
Aquí está mi respuesta (espero que ayude a otros que siguen el mismo agujero de conejo de Google): defínalos en su package.json :
"main": "./build/index.js", "module": "./build/index.js", "devDependencies": { "@babel/cli": "^7.14.3", "@babel/core": "^7.14.3", "@babel/preset-env": "^7.14.4", "@babel/preset-react": "^7.13.13", "commander": "^7.2.0", ... }, "scripts": { ... "transpile": "NODE_ENV=production npx babel --out-dir ../build --relative --copy-files src", }, "babel": { "presets": [ "@babel/preset-env", "@babel/preset-react" ] }, El npm transpile ; npm publish Los comandos npm transpile ; npm publish ahora deberían funcionar. Descubrí que debido al problema descrito aquí por Utku Gultopu, los usuarios de yarn deberán hacer esto de antemano para actualizar completamente de babel 6 a 7:
npm install @babel/core @babel/cli @babel/preset-react @babel/preset-env No necesita ninguno de estos: webpack.config.js , .babelrc o babel.config.js . Asegúrese de borrar el subdirectorio de build (e incluirlo en .gitignore ) antes de ejecutar las operaciones de build (para crear una imagen en tiempo de ejecución) o transpile (para publicar su biblioteca de módulos); son dos cosas muy diferentes.