web-dev-qa-db-fra.com

SSR React-Loadable avec Webpack 4 et Babel 7

Le rendu côté serveur avec react-loadable fonctionne-t-il avec Webpack 4 et Babel 7? Je n'ai pas réussi à le faire fonctionner correctement en suivant les instructions .

Après avoir suivi uniquement les étapes côté client, Webpack génère correctement des fragments distincts pour chaque composant chargeable, ce qui est reflété lorsque je charge la page dans le navigateur (c'est-à-dire que les morceaux sont chargés paresseux).

Après avoir suivi toutes les étapes SSR, le serveur lève l'erreur suivante:

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)

Mon fichier 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,
  },
  ...
];

Ce problème sur SO est peut-être lié à l'erreur de serveur que je vois ci-dessus, mais avec encore moins d'informations.

Mon .babelrc utilise déjà @babel/plugin-syntax-dynamic-import, mais j'ai essayé d'ajouter babel-plugin-dynamic-import-node . Cela corrige le problème du serveur, mais Webpack ne construit plus les morceaux.

Je suis incapable de trouver un exemple définitif pour que cela fonctionne. Il existe des informations contradictoires sur la configuration appropriée. Par exemple, le README réactif-chargeable dit d'utiliser le plugin react-loadable/babel inclus, alors que cet article de l'auteur de la bibliothèque dit d'utiliser babel-plugin-import-inspector. Ce PR semblait tenter de résoudre les problèmes de Webpack 4 mais a été fermé, et la bibliothèque forked semble également avoir des problèmes.

J'utilise:

  • Babel 7
  • Noeud 10.4
  • Réagir 16.5
  • React-Loadable 5.5
  • Webpack 4
node.jsreactjsbabeljswebpack-4react-loadable
5
ericgio

J'ai eu exactement le même problème aujourd'hui. Après avoir ajouté dynamic-import-node aux plugins de mon .babelrc, le serveur fonctionnait, mais Webpack ne créait pas les morceaux. Je l'ai ensuite retiré de mon .babelrc et l'ai déplacé vers mon script de serveur avec @babel/register. Mon script serveur ressemble maintenant à ceci:

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

J'espère que ça aide ;)

1
Quinten