Надеюсь, это поможет ;)
ринг на стороне сервера сreact-loadable
работать с Webpack 4 и Babel 7? Я не смог заставить его работать успешно, следуяинструкции.
Выполнив только шаги на стороне клиента, Webpack правильно выводит отдельные чанки для каждого загружаемого компонента, и это отражается, когда я загружаю страницу в браузер (то есть: чанки загружаются лениво).
Однако после выполнения всех шагов SSR сервер выдает следующую ошибку:
Error: Not supported
at loader (/Projects/test-project/web/routes/index.js:50:15)
at load (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:28:17)
at init (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:121:13)
at flushInitializers (/Projects/test-project//web/node_modules/react-loadable/lib/index.js:310:19)
at /Projects/test-project/web/node_modules/react-loadable/lib/index.js:322:5
at new Promise (<anonymous>)
at Function.Loadable.preloadAll (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:321:10)
at Object.preloadAll (/Projects/test-project/web/server.js:15:10)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Module._compile (/Projects/test-project/web/node_modules/pirates/lib/index.js:83:24)
мойroutes/index.js
файл:
import React from 'react';
import Loadable from 'react-loadable';
import Loading from '../components/Loading';
export default [
{
path: '/',
component: Loadable({
loader: () => import('./controllers/IndexController'),
loading: Loading,
}),
exact: true,
},
{
path: '/home',
component: Loadable({
loader: () => import('./controllers/HomeController'),
loading: Loading,
}),
exact: true,
},
...
];
Эта проблема на SO, возможно, связано с ошибкой сервера, которую я вижу выше, но предоставил еще меньше информации.
мой.babelrc
уже использует@babel/plugin-syntax-dynamic-import
, но я попытался добавитьbabel-plugin-dynamic-import-node
, Это устраняет проблему с сервером, но Webpack больше не создает фрагменты.
Я не смог найти точного примера, чтобы заставить это работать. Существует противоречивая информация о правильной настройке. Например, README с реактивной загрузкой говорит использоватьreact-loadable/babel
плагин, аэта почта автор lib говорит использоватьbabel-plugin-import-inspector
. Это пиар Казалось, что он пытался решить проблемы с Webpack 4, но был закрыт, и, похоже, у разветвленной библиотеки тоже были проблемы.
Я использую:
Бабель 7Узел 10.4Реакция 16.5React-Loadable 5.5Webpack 4