Tipo no utilizado Error: __WEBPACK_IMPORTED_MODULE_0_react______default.a.createContext no es una función
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!
Pregunta hecha hace 3 años, 5 meses, 5 días - Por codechampionx
3 Respuestas:
-
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 parecenpm 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
Votos positivos: 0 | Votos negativos: 0 -
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óncreateContext
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 archivopackage.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
Votos positivos: 0 | Votos negativos: 0 -
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
Votos positivos: 0 | Votos negativos: 0