Блог

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

Спасибо!

Причина, по которой вы получаете эту ошибку, заключается в том, что одна из ваших зависимостей (или, возможно, даже ваш код) зависит от React.createContext метода.

Это часть «контекстного API», введенного в версии 16.3 (список изменений)

Вам нужно либо удалить зависимость, для которой требуется эта более поздняя версия 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.
 

В качестве обходного пути вы также можете иногда проверять, работает ли предыдущая версия проблемного пакета с более ранней версией одноранговой зависимости 🙂