Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function

Question

I'm using @loadable/component in the following way:

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
  );
}

When I build the app on the console, I get the following:

$ 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

Then, when opening the app on the browser, on the Chrome console I get the following 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

When clicking on: app.js?v=:23402 above I get the following:

This is a fragment of 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"
}

Any idea on how to solve this?

Note: before using @loadable/component everything was working fine, but I need to make things work with: @loadable/component;

Thanks!

Answer 1

The reason you are getting this error is because one of your dependencies (or maybe even your code) relies on React.createContext method.

This is part of the "context API" introduced in version 16.3 (changelog)

You either have to remove the dependency that requires this later react version, or upgrade your react version to at least 16.3.

Typically, when a dependency in your package.json depends on a specific version of react, it would list that version as a "peer dependency". If so, when running npm install you would receive a warning that looks like

npm WARN somedependency@a.b.c requires a peer of react@^16.3.0 but...

You can use this warning to find the culprit package if you want. If you get no such warning, then either the offending code is in your codebase, or some dependency has their peers stated incorrectly.

For example, after running npm install with the package versions you've included in your post, we get (beyond the deprecation warnings, which are out of scope of this question) the following warning:

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.

As a workaround you can also sometimes check if a previous version of the problematic package works with an earlier peer dependency version :)