Come evitare Reagire caricare due volte con Webpack nello sviluppo

Question

Data la seguente struttura di directory:

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

È possibile vedere sia mio progetto e modulo-x richiedono reagire. Ho lo stesso problema descritto su this question, ma il suggerimento è quello di rimuovere reagire dalle dipendenze di package.json. Lo faccio e funziona bene, purché non siano installati node_modules in module-x, perché Webpack utilizzerà React da my-project. Ma se sono in fase di sviluppo del modulo -x e i node_modules sono installati, Webpack utilizza React sia da mio-progetto e modulo-x.

È possibile che Webpack si assicuri che venga utilizzata solo un'istanza di React, anche se è richiesta su due livelli separati?

So che avrei potuto mantenere modulo-x in una directory separata durante lo sviluppo, ma sembra che avrei dovuto pubblicarlo e quindi installarlo in mio progetto per provarlo, e che non è molto efficiente. Ho pensato a npm link, ma non ho avuto fortuna poiché ha ancora node_modules installati in module-x.

This here suona molto simile alla stessa sfida che sto avendo, ma non sembra come npm dedupe o l'opzione di deduplicazione di Webpack potrebbe funzionare. Probabilmente non sto capendo alcuni dettagli importanti.

Answer 1

Questo problema si verifica in genere quando si utilizza npm link. Un modulo collegato risolverà le sue dipendenze nella sua struttura del modulo, che è diversa da quella del modulo che lo richiedeva. Pertanto, il comando npm link installa peerDependencies e dependencies.

È possibile utilizzare resolve.alias per forzare require('react') per risolvere la versione locale di React.

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

Answer 2

Se non si vuole (o non può) modificare la configurazione del progetto, c'è una soluzione più semplice: basta npm link Reagire si torna al progetto:

# 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