Webpack के साथ दो बार लोड हो रहा है प्रतिक्रिया जब

Question

निम्नलिखित निर्देशिका संरचना को देखते हुए विकासशील से बचने के लिए कैसे:

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

आप देख सकते हैं दोनों मेरी परियोजना और मॉड्यूल-x प्रतिक्रिया की आवश्यकता है। this question पर वर्णित एक ही समस्या है, लेकिन सुझाव है कि पैकेज.जेसन निर्भरताओं से प्रतिक्रिया को हटाना है। मैं ऐसा करता हूं और यह ठीक काम करता है, जब तक मॉड्यूल-एक्स में कोई नोड_मोड्यूल स्थापित नहीं किया जाता है, क्योंकि वेबपैक मेरा प्रोजेक्ट से प्रतिक्रिया का उपयोग करेगा। लेकिन अगर मैं मॉड्यूल-एक्स और node_modules स्थापित करने की प्रक्रिया में हूं, तो वेबपैक मेरी परियोजना और मॉड्यूल-एक्स दोनों से प्रतिक्रिया का उपयोग करता है।

क्या कोई तरीका है कि वेबपैक सुनिश्चित कर सकता है कि प्रतिक्रिया का केवल एक उदाहरण उपयोग किया जाता है, भले ही यह दो अलग-अलग स्तरों पर आवश्यक हो?

मुझे लगता है मैं एक अलग निर्देशिका जब विकसित करने में रख सकता है मॉड्यूल-x पता है, लेकिन ऐसा लगता है जैसे मैं इसे प्रकाशित और फिर इसे परीक्षण करने के लिए में इसे स्थापित मेरी परियोजना करना होगा और वह बहुत ही नहीं है कुशल। मैंने npm link के बारे में सोचा, लेकिन इसके साथ कोई भाग्य नहीं था क्योंकि इसमें अभी भी मॉड्यूल-एक्स में स्थापित node_modules है।

This here मेरे पास एक ही चुनौती की तरह लगता है, लेकिन यह npm dedupe जैसा नहीं लगता है या वेबपैक का dedupe विकल्प काम करेगा। मैं शायद कुछ महत्वपूर्ण विस्तार को समझ नहीं रहा हूं।

Answer 1

यह समस्या आमतौर पर npm link का उपयोग करते समय उत्पन्न होती है। एक लिंक किया गया मॉड्यूल अपनी निर्भरताओं को अपने मॉड्यूल पेड़ में हल करेगा, जो मॉड्यूल में से एक से अलग है जो इसकी आवश्यकता है। इस प्रकार, npm link कमांड peerDependencies के साथ-साथ dependencies इंस्टॉल करता है।

आप प्रतिक्रिया के अपने स्थानीय संस्करण को हल करने के लिए require('react') को मजबूर करने के लिए resolve.alias का उपयोग कर सकते हैं।

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

Answer 2

आप नहीं करना चाहते हैं (या नहीं कर सकते हैं) परियोजना विन्यास को संशोधित करते हैं, वहाँ एक और अधिक सरल समाधान है:

# 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 

: सिर्फ npm link ही वापस अपने प्रोजेक्ट में प्रतिक्रिया