Реактивно загружаемый SSR с Webpack 4 и Babel 7

Question

Работает ли серверный рендеринг с 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)

Myroutes/index.js file:

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, возможно, связана с ошибкой сервера, которую я вижу выше, но предоставила еще меньше информации.

My.babelrc уже использует @babel/plugin-syntax-dynamic-import, но я попытался добавить babel-plugin-dynamic-import-node.Это устраняет проблему с сервером, но Webpack больше не собирает куски.

Я не смог найти точного примера, чтобы это заработало.Существует противоречивая информация о правильной настройке.Например, README, способный реагировать на загрузку, говорит, что использует включенный плагин react-loadable/babel, а этот пост от автора библиотеки говорит, что он должен использовать babel-plugin-import-inspector. Этот PR , похоже, пытался решить проблемы с Webpack 4, но был закрыт, и, похоже, у разветвленной библиотеки также были проблемы.

Я использую:

• Babel 7
• Узел 10.4
• React 16.5
• React-Loadable 5.5
• Webpack 4

Answer 1

У меня была точно такая же проблема сегодня.После добавления dynamic-import-node к плагинам моего .babelrc сервер работал, но веб-пакет не создавал куски.Затем я снова удалил его из моего .babelrc и переместил в свой серверный скрипт с @babel/register.Мой серверный скрипт теперь выглядит так:

require( "@babel/register" )({
    presets: ["@babel/preset-env", "@babel/preset-react"],
    plugins: ["dynamic-import-node"]
});
require( "./src/server" );

Надеюсь, это поможет;)