Tipo no utilizado Error: __WEBPACK_IMPORTED_MODULE_0_react______default.a.createContext no es una función

Question

Estoy usando @loadable/component de la siguiente manera: app.js import React from 'react'; import loadable from  @loadable/component ; // ... const Welcome = loadable(() => import(/* webpackChunkName:  welcome  */  ./components/Welcome ) ); // ... let root = document.getElementById('root'); if (root) { render( ... ... , root ); } Cuando construyo la aplicación en la consola, obtengo lo siguiente: $ npm run watch > cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=./webpack.config.js 10% building modules 2/2 modules 0 active Webpack is watching the files… 95% emitting DONE Compiled successfully in 3775ms5:40:45 AM Asset Size Chunks Chunk Names welcome.js?v=##BUILD_NUMBER## 15.9 kB 0 [emitted] welcome /vendor.js 2.49 MB 1 [emitted] [big] /vendor /app.js 1.9 MB 2 [emitted] [big] /app /manifest.js 5.83 kB 3 [emitted] /manifest ../css/styles.css 59.5 kB 2 [emitted] /app Luego, al abrir la aplicación en el navegador, en la consola Chrome obtengo el siguiente error: app.js?v=:23402 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function at Object.553 (app.js?v=:23402) at __webpack_require__ (manifest.js?v=:55) at Object.403 (app.js?v=:21450) at __webpack_require__ (manifest.js?v=:55) at Object.402 (app.js?v=:21415) at __webpack_require__ (manifest.js?v=:55) at webpackJsonpCallback (manifest.js?v=:26) at app.js?v=:1 Al hacer clic en: app.js?v=:23402 arriba Tengo lo siguiente: Este es un fragmento de package.json: {  private : true,  scripts : { ... },  devDependencies : {  babel-plugin-transform-class-properties :  ^6.24.1 ,  babel-preset-es2015 :  ^6.24.1 ,  babel-preset-react :  ^6.23.0 ,  babel-preset-stage-2 :  ^6.24.1 ,  bootstrap-less :  ^3.3.8 ,  cross-env :  ^5.0.1 ,  flux :  ^3.1.3 ,  laravel- mix :  ^2.1 ,  laravel-mix-purgecss :  ^5.0.0-rc.1 ,  less :  ^2.7.2 ,  less- loader :  ^4.0.5 ,  lodash :  ^4.17.4 ,  webpack :  ^3.5.0  },  dependencies : {  @loadable/component :  ^5.14.1 ,  axios :  ^0.16.2 ,  classnames :  ^2.2.6 ,  dotenv :  ^8.2.0 ,  jquery :  ^3.2.1 ,  md5 :  ^2.2.1 ,  moment :  ^2.19.1 ,  npm :  ^6.1.0 ,  query-string :  ^6.4.2 ,  react :  ^15.6.1 ,  react-bootstrap :  ^0.31.3 ,  react-collapsible :  ^2.2.0 ,  react-cookies :  ^0.1.0 ,  react-dom :  ^15.6.1 ,  react-number-format :  ^2.0.4 ,  react- router :  ^4.2.0 ,  react-router-dom :  ^4.2.2 ,  react-slick :  ^0.15.4 ,  react-text-mask :  ^5.0.2 ,  store2 :  ^2.5.5  },  main :  webpack.mix.js  } ¿Alguna idea de cómo resolver esto? Nota: antes de usar @loadable/component todo estaba funcionando bien, pero necesito hacer que las cosas funcionen con: @loadable/component; ¡Gracias!

rubyrover · Accepted Answer

La razón por la que estás recibiendo este error es porque una de tus dependencias (o tal vez incluso tu código) depende de React.createContext método.

Esto es parte de la " API de contexto" introducida en versión 16.3 (cambio)

Usted tiene que eliminar la dependencia que requiere esta versión de react posterior, o actualizar su versión de react al menos 16.3.

Típicamente, cuando una dependencia en su package.json depende de una versión específica de la react, listaría esa versión como una "dependencia del usuario". Si es así, cuando corre npm install recibiría una advertencia que parece

npm WARN [email protected] requires a peer of react@^16.3.0 but...

Puedes usar esta advertencia para encontrar el paquete culpable si quieres. Si no recibe tal advertencia, entonces el código ofensivo está en su base de código, o alguna dependencia tiene sus pares declarados incorrectamente.

Por ejemplo, después de correr npm install con las versiones de paquetes que has incluido en tu post, obtenemos (más allá de las advertencias de deprecación, que están fuera de alcance de esta pregunta) la siguiente advertencia:

npm WARN @loadable/[email protected] requires a peer of react@>=16.3.0 but none is installed. You must install peer dependencies yourself.

Como solución de trabajo también se puede comprobar si una versión anterior del paquete problemático funciona con una versión anterior de dependencia entre pares :)

Respondida el Dec 18, 2020 a las 11:57 - por rubyrover

Gpt · Answer

El error que estás experimentando se debe a que estás utilizando una versión de React que no es compatible con la función createContext. La función createContext se introdujo en React version 16.3.0, por lo que si estás utilizando React 15.6.1, no tendrás acceso a esta función.

Para resolver este problema, te recomendaría que actualices la versión de React y React DOM a una versión compatible con createContext. En tu archivo package.json, tienes las siguientes versiones especificadas:

json
"react": "^15.6.1",
"react-dom": "^15.6.1",

Debes actualizar estas dependencias a lo mínimo requerido para utilizar createContext:

json
"react": "^16.3.0",
"react-dom": "^16.3.0",

Una vez que hayas actualizado las dependencias, asegúrate de volver a instalar los paquetes utilizando el siguiente comando:

bash
npm install

Después de realizar estos cambios, vuelve a construir tu aplicación y asegúrate de que el error haya sido solucionado. ¡Espero que esto te ayude a resolver el problema!

Respondida el Dec 19, 2020 a las 11:56 - por Gpt

Gemini · Answer

El error que estás viendo es causado por una versión incompatible de React. @loadable/component requiere React versión 16 o superior, mientras que tu proyecto parece estar usando React versión 15.

Para resolver este problema, actualiza React a la versión 16 o superior en tu proyecto. Puedes hacer esto ejecutando el siguiente comando:


npm install react@16 --save

Después de actualizar React, asegúrate de reiniciar tu servidor de desarrollo. Esto debería resolver el error y permitir que @loadable/component funcione correctamente en tu proyecto.

Respondida el Dec 19, 2020 a las 12:00 - por Gemini

Tipo no utilizado Error: __WEBPACK_IMPORTED_MODULE_0_react______default.a.createContext no es una función

3 Respuestas: