Composant de rendu React & Webpack exporté par un ensemble externe

J’essaie de consumr un composant React exposé dans un script externe (ensemble A) au sein de mon application React principale (ensemble B) .

Le composant ‘en-tête’ externe de React (ensemble A) est chargé via un et exposé sous forme de variable de fenêtre globale à l’aide de l’exposeur -chargeur Webpack.

Mon site référence ensuite les ensembles dans l’ordre suivant:

  1. Bundle React / ReactDOM
  2. Ensemble de composants d’en-tête externe (ensemble A)
  3. Bundle principale de l’application (bundle B)

Le composant d’en-tête externe peut ensuite être référencé via window.appHeaderBundle dans l’application principale (ensemble B), par exemple:

entrez la description de l'image ici

Dans mon application principale, j’ai essayé de référencer le composant comme const Header = window.appHeaderBundle.default; puis dans mon render() utilisant comme jsx

.

Cela commence à courir à travers le code du composant mais explose avec l’erreur:

Erreur non capturée: la référence de l’élément a été spécifiée en tant que chaîne (searchForm) mais aucun propriétaire n’a été défini. Vous pouvez avoir plusieurs copies de React chargées.

Est-ce que ce que j’essaie de faire est possible et si oui, comment puis-je obtenir le rendu de mon composant?

EDIT: Cette approche fonctionne avec un composant simple qui rend simplement

test

. L’utilisation de l’ ref est ce qui brise les choses!


L’idée derrière ceci est que le paquet externe peut être déposé dans plusieurs sites. La mise à jour du paquet externe serait alors répercutée sur tous les sites. Actuellement, chaque site le charge via NPM, mais cela nécessite que chaque site modifie le numéro de version lorsqu’un changement est apporté, raison pour laquelle j’abandonne cette approche.

L’erreur indique que vous avez différentes copies de React. Vous devriez montrer la configuration de votre webpack pour le “plugin” (le composant externe). Dans la réponse que vous avez commentée , j’ai expliqué que la configuration du pack Web pour les plugins définissait React comme étant externe.

Cela signifie bien sûr que votre application principale doit définir window.React = React avant que les composants chargés paresseux ne soient inclus, afin qu’ils fonctionnent. Ils ne doivent pas inclure React eux-mêmes à nouveau, ce qui va à l’encontre de l’objective consistant à avoir un seul bundle de React (ou plus généralement un vendor ) et des composants chargés paresseux définis comme un projet Javascript complètement séparé.

https://webpack.js.org/configuration/externals/

L’erreur est étrange, mais ça sent comme si vous ne le faisiez pas et le paquet d’en-tête inclut donc sa propre copie de React.

Personnellement, je n’ai pas rencontré cette erreur, mais avez-vous déjà essayé de résoudre les problèmes énumérés sur cette page ?

D’après votre explication, la manière dont vous utilisez votre composant externe devrait être possible. Je ne suis pas sûr que votre raisonnement pour utiliser un bundle externe au lieu de npm soit bon.

  • Utiliser npm enregistrerait une requête HTTP supplémentaire pour ce composant externe.
  • Que se passe-t-il lorsque le composant externe subit des modifications importantes? Si l’utilisateur de ce composant externe ne le sait pas, son application Web peut tomber en panne. Utiliser npm empêcherait cela.