Como solucionar el Error regeneratorRuntime is not defined con React, Babel y Webpack
Hace algunos dias mientras trabajaba en un proyecto de React, especificamente con una función Asincrona. Las funciones Async o asincronas son complicadas de trabajar, pues en muchas ocaciones nos topamos con este problema.
El problema es de Babel y no tanto de React o de Webpack, asi que despues de mucho navegar y de buscar la solucion a este problema, encontre una forma de corregirlo.
Solucion a regeneratorRuntime is not defined
Antes un poco de historia para que comprandamos de donde viene. Si ya has tenido este error, posiblemente hayas caido en este hilo de Stack-Overflow, donde de explican que puedes corregir el error al instalar babel-polyfill se soluciona el error.
Multiples usuarios ya han comentado dicho hilo diciendo que babel-polyfill ya esta deprecated, osea que ya no es funcional. especificamente desde Babel 6 ya no es funcional este modulo.
Como arreglar regeneratorRuntime is not defined (Parcel, React, Webpack y Babel 6)
Es muy sencillo, una de las ventajas de programar con JavaScript es que existe una comunidad muy grande y que si las cabezas de los proyectos parecen no tomar en cuenta algunas sugerencias, hay usuarios que toman medidas.
Paso 1 Regenerator-runtime
Debemos instalar el modulo regenerator-runtime con npm, por si lo sabes usar te dejo el script:
npm install --save regenerator-runtime
Paso 2 Webpack
Debemos actualiza nuestro archivo de configuracion de Webpack, para esto modificamos nuestro entry:
entry: ["regenerator-runtime/runtime.js", "Index.js"]
Paso 3 Requerir Regenerator-runtime
Ahora solo debemos requerir el modulo en donde necesitemos usar las funciones asincronas.
import 'regenerator-runtime/runtime'
Y listo ya podemos usar funciones asincronas y volver a disfrutar de la vida.
