Uncaught :TypeError不是一个函数
我使用@loadable/component的方式如下：
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(
<BrowserRouter>
<Switch>
...
<Route path="/welcome" component={Welcome} />
...
</Switch>
</BrowserRouter>,
root
);
}当我在控制台上构建应用程序时，我得到以下信息：
$ 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然后，在浏览器上打开应用程序时，在Chrome控制台上，我会得到以下错误：
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当单击上面的：app.js?v=:23402时，我得到以下内容：
这是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"
}知道怎么解决这个问题吗？
注意：在使用@loadable/component之前一切都很好，但是我需要使用：@loadable/component；
谢谢!
回答 1
Stack Overflow用户
发布于 2020-12-18 12:00:12
之所以会出现此错误，是因为依赖项(甚至可能是代码)依赖于React.createContext方法。
这是在版本16.3 (变动人数g)中引入的“上下文API”的一部分。
您必须移除需要此稍后的react版本的依赖项，或者将您的react版本升级到至少16.3。
通常，当package.json中的依赖项依赖于react的特定版本时，它会将该版本列为“对等依赖”。如果是这样的话，当运行npm install时，您将收到如下所示的警告
npm WARN somedependency@a.b.c requires a peer of react@^16.3.0 but...如果需要，可以使用此警告查找罪犯包。如果您没有收到这样的警告，那么您的代码库中要么是违规代码，要么是某些依赖项的对等方声明错误。
例如，在运行了包含在文章中的包版本的npm install之后，我们得到了以下警告(超出了这个问题范围之外的弃用警告)：
npm WARN @loadable/component@5.14.1 requires a peer of react@>=16.3.0 but none is installed. You must install peer dependencies yourself.作为一种解决方法，您有时还可以检查问题包的早期版本是否与早期的对等依赖版本一起工作:)
https://stackoverflow.com/questions/65356504
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号