开发者问题收集

未捕获的类型错误：__WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext 不是一个函数

2020-12-18
4318
javascript node.js reactjs webpack

我以以下方式使用 @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个回答

您收到此错误的原因是因为您的一个依赖项（甚至可能是您的代码）依赖于 React.createContext 方法。

这是版本 16.3 中引入的“上下文 API”的一部分 (changelog)

您必须删除需要此更高 React 版本的依赖项，或者将您的 React 版本升级到至少 16.3 。

通常，当您的 package.json 中的依赖项依赖于特定版本的 React 时，它会将该版本列为“对等依赖项”。如果是这样，在运行 npm install 时，您会收到类似这样的警告 

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

如果需要，您可以使用此警告查找罪魁祸首包。如果您没有收到这样的警告，则要么有问题的代码在您的代码库中，要么某些依赖项的对等项声明不正确。

例如，在使用您在帖子中包含的软件包版本运行 npm install 后，我们收到（超出弃用警告的范围，这超出了本问题的范围）以下警告： 

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

作为一种解决方法，您有时还可以检查有问题的软件包的先前版本是否与早期的对等依赖项版本兼容 :)

Marian
2020-12-18