kann nicht zuweisen nur Eigenschaft lesen '__esModule'

Question

Wenn eine mit Webpack und Babel Reagieren und Redux Anwendung Kompilieren erhalte ich:

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

In einigen älteren Browsern (< = Chrome 1, Android 4, Safari 5).

Dieses Problem scheint von redux und react-redux Ausgabe der Linie exports.__esModule = true; im lib bauen, aber meine Anwendung mit Object.defineProperty statt Einhalt zu gebieten (weil sie build loosely und ich nicht).

Zwei Lösungen sind:

1. Aufbau meiner Anwendung auch in loose Modus.

2. Importieren react-redux/src und redux/src und bauen Sie es mit der gleichen .babelrc als die Anwendung (alles ist nicht lose).

Solange sie konsistent und beide sind:

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

und exports.__esModule = true; nicht koexistieren in meiner Ausgabe, funktioniert alles.

Meine Frage ist, was ist die richtige Lösung? Warum betrifft dies nur ältere Browser? Und warum widersprechen sie sich?

Hier ist ein similar question.

Answer 1

Meine Vermutung ist, müssen Sie babel-plugin-add-module-exports und in Ihrem .babelrc Register dieses Plugin installieren: this website

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

Für weitere Informationen besuchen.

Answer 2

Object.defineProperty ist auf einigen Android 4 Stock Browser-Versionen und wahrscheinlich anderen Browsern, die eine Buggy-Implementierung in Webkit verwendet, gebrochen.

Überprüfen Sie this bug report und and this other one berichtet, um das Chrom-Projekt.

Die gute Nachricht ist, dass Sie this polyfill anwenden können, um das Problem zu beheben.

Um die Sache einfach zu machen, können Sie einfach kopieren und fügen Sie diese Polyfill auf einem <script> Tag vor Ihrem Bundle.

Dies wird Ihre Probleme beheben.

Answer 3

In meinem Fall habe ich gelöst, um Babel-Register-Bibliothek in Einstiegspunkten hinzuzufügen.

In webpack.config.js (Webpack 1.x-Version von Konfiguration)

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

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

Answer 4

Wir trafen dieses Problem auf Android 4.0 und zur Zeit können wir die Unterstützung für Android 4.0 nicht schneiden.

Für webpack 1.0, setzen Sie einfach los: True, wenn Sie Babel-Preset-env verwenden. Allerdings kann der lose Modus für Webpack 2 dieses Problem nicht beheben.

Schließlich fanden wir diesen Trick, ein wenig hässlich.

// 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); 
}; 

Und in Ihrer Webpack-Konfigurationsdatei.

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