जब Webpack और कोलाहल के साथ एक प्रतिक्रिया और Redux आवेदन संकलन केवल संपत्ति को पढ़ने के लिए आवंटित नहीं किया जा सकता '__esModule'

Question

मैं:

Uncaught TypeError: Cannot assign to read only property '__esModule' of #<Object>

कुछ पुराने ब्राउज़र में (< = क्रोम 1, एंड्रॉयड 4, सफारी 5)।

यह समस्या से redux और react-reduxlib निर्माण में लाइन exports.__esModule = true; outputting लेकिन अपने आवेदन के बजाय Object.defineProperty का उपयोग कर (क्योंकि वे build loosely और मुझे नहीं पता) स्टेम लगता है।

दो समाधान हैं:

1. भी loose मोड में अपने आवेदन का निर्माण।

2. react-redux/src और redux/src आयात करना और इसे उसी के साथ बनाना .babelrc एप्लिकेशन के रूप में (सबकुछ ढीला नहीं है)।

जब तक वे सुसंगत और दोनों कर रहे हैं के रूप में:

Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 

और exports.__esModule = true; मेरी उत्पादन में नहीं सह अस्तित्व है, सब कुछ काम करता है।

मेरा सवाल है, सही समाधान क्या है? यह केवल पुराने ब्राउज़र को क्यों प्रभावित करता है? और वे संघर्ष क्यों करते हैं?

यहां एक similar question है।

"plugins": [ 
    "babel-plugin-add-module-exports" 
] 

अधिक जानकारी के this website के लिए:

Answer 1

मेरा अनुमान है, तो आप babel-plugin-add-module-exports और इस प्लगइन में अपने .babelrc रजिस्टर स्थापित करने की आवश्यकता।

Answer 2

Object.defineProperty कुछ एंड्रॉइड 4 स्टॉक ब्राउज़र संस्करणों और शायद अन्य ब्राउज़रों पर टूट गया है जो वेबकिट में एक छोटी गाड़ी कार्यान्वयन का उपयोग करते हैं।

this bug report और and this other one क्रोमियम प्रोजेक्ट को सूचित किया गया।

अच्छी खबर यह है कि आप समस्या को ठीक करने के लिए this polyfill लागू कर सकते हैं।

चीज़ को आसान बनाने के लिए, आप अपने पॉंडल से पहले <script> टैग पर उस पॉलीफ़िल को कॉपी और पेस्ट कर सकते हैं।

यह आपके मुद्दों को ठीक करेगा।

Answer 3

मेरे मामले में, मैंने प्रवेश बिंदुओं में बेबेल-रजिस्टर लाइब्रेरी जोड़ने का हल किया।

webpack.config.js में (विन्यास की Webpack 1.x संस्करण)

// As is 
entry: { 
    main: 'index.js' 
}, 

// To be 
entry: { 
    main: ['babel-register', 'index.js'] 
}, 

Answer 4

हम Android 4.0 पर इस समस्या से मुलाकात की और वर्तमान में हम Android 4.0 के लिए समर्थन में कटौती नहीं कर सकते।

वेबपैक 1.0 के लिए, बस ढीला सेट करें: जब आप babel-preset-env का उपयोग कर रहे हों तो सही। हालांकि वेबपैक 2 के लिए, ढीला मोड इस समस्या को हल नहीं कर सकता है।

अंत में, हमें यह चाल, थोड़ी बदसूरत मिली।

// client_patch.js, For Android 4.0 
var defineProperty = Object.defineProperty; 
Object.defineProperty = function (exports, name) { 
    if (name === '__esModule') { 
    exports[name] = true; 
    return; 
    } 
    return defineProperty.apply(this, arguments); 
}; 

और अपनी वेबपैक कॉन्फ़िगरेशन फ़ाइल में।

// webpack.config.js 
entry: { 
    main: [ 
    path.resolve(__dirname, 'client_patch.js'), 
    'index.js' 
    ] 
}