Impossibile assegnare alla sola lettura proprietà '__esModule'

Question

Quando si compila un Reagire e Redux applicazione con Webpack e Babel ottengo:

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

In alcuni browser meno recenti (< = Chrome 1, Android 4, Safari 5).

Questo problema sembra derivare da redux e react-redux emettere la linea exports.__esModule = true; nel lib costruzione, ma la mia domanda utilizzando Object.defineProperty invece (perché build loosely e io non lo fanno).

due soluzioni sono:

1. Costruire la mia applicazione in modalità loose anche.

2. Importare react-redux/src e redux/src e costruirlo con lo stesso .babelrc dell'applicazione (non è tutto allentato).

Finché sono coerenti ed entrambi:

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

e exports.__esModule = true; non lo fanno coesistere nella mia uscita, tutto funziona.

La mia domanda è, qual è la soluzione giusta? Perché questo riguarda solo i browser più vecchi? E perché entrano in conflitto?

Questo è un similar question.

Answer 1

La mia ipotesi è, è necessario installare babel-plugin-add-module-exports e nel vostro registro .babelrc questo plugin:

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

Per ulteriori informazioni visitare this website.

Answer 2

Object.defineProperty è rotto su alcune versioni di browser stock di Android 4 e probabilmente su altri browser che utilizzavano un'implementazione bacata in Webkit.

Controllare this bug report e and this other one segnalati al progetto chromium.

La buona notizia è che è possibile applicare this polyfill per risolvere il problema.

Per semplificare la procedura, è sufficiente copiare e incollare il polifraggio su un tag <script> prima del pacchetto.

Questo risolverà i tuoi problemi.

Answer 3

Nel mio caso, ho risolto l'aggiunta della libreria di registro babel nei punti di ingresso.

In webpack.config.js (Webpack versione 1.x di configurazione)

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

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

Answer 4

Abbiamo incontrato questo problema su Android 4.0 e al momento non siamo in grado di tagliare il supporto per Android 4.0.

Per webpack 1.0, impostare solo loose: true quando si utilizza babel-preset-env. Tuttavia, per Webpack 2, la modalità allentata non può risolvere questo problema.

Infine, abbiamo trovato questo trucco, un po 'brutto.

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

E nel file di configurazione del Webpack.

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