Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext не является функцией

Я использую @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;

Спасибо!