web-dev-qa-db-fra.com

Comment éviter React de charger deux fois avec Webpack lors du développement

Étant donné la structure de répertoires suivante:

my-project
|
|-- node_modules
    |
    |-- react
    |-- module-x
        |
        |--node_modules
            |
            |--react

Vous pouvez voir les deux mon-projet et module-x nécessitent React. J'ai le même problème que celui décrit sur cette question , mais la suggestion est de supprimer React des dépendances package.json. Je le fais et cela fonctionne très bien, tant qu'aucun module node_modules n'est installé dans module-x, car Webpack utilisera React de my-project =. Mais si je suis en train de développer module-x et que les node_modules sont installés, Webpack utilise React des deux mon-projet et module-x.

Existe-t-il un moyen pour que Webpack s'assure qu'une seule instance de React est utilisée, même si elle est requise sur deux niveaux distincts?

Je sais que je pourrais garder module-x dans un répertoire séparé lors du développement, mais il semble que je devrais le publier puis l'installer dans mon-projet pour le tester, et ce n'est pas très efficace. J'ai pensé à npm link, Mais je n'ai pas eu de chance car il a toujours node_modules installé dans module-x.

Ceci ici ressemble beaucoup au même défi que moi, mais il ne semble pas que npm dedupe Ou l'option de déduplication de Webpack fonctionnerait. Je ne comprends probablement pas certains détails importants.

npmreactjswebpack
36
chevin99

Ce problème survient généralement lors de l'utilisation de npm link. Un module lié résoudra ses dépendances dans sa propre arborescence de modules, qui est différente de celle du module qui l'a requis. En tant que telle, la commande npm link Installe peerDependencies ainsi que dependencies.

Vous pouvez utiliser resolve.alias Pour forcer require('react') à résoudre votre version locale de React.

resolve: {
  alias: {
    react: path.resolve('./node_modules/react'),
  },
},
81
Alexandre Kirszenberg

Si vous ne voulez pas (ou ne pouvez pas) modifier la configuration du projet, il existe une solution plus simple: juste npm link React lui-même à votre projet:

# link the component
cd my-app
npm link ../my-react-component

# link its copy of React back to the app's React
cd ../my-react-component
npm link ../my-app/node_modules/react
40
Dan Abramov