Cannot assign to read only property '__esModule'

Question

When compiling a React and Redux application with Webpack and Babel I get:

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

In some older browsers (<= Chrome 1, Android 4, Safari 5).

This issue seems to stem from redux and react-redux outputting the line exports.__esModule = true; in the lib build but my application using Object.defineProperty instead (because they build loosely and I do not).

Two solutions are:

1. Building my application in loose mode also.

2. Importing react-redux/src and redux/src and building it with the same .babelrc as the application (everything is not loose).

As long as they are consistent and both:

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

and exports.__esModule = true; do not co-exist in my output, everything works.

My question is, what is the right solution? Why does this only affect older browsers? And why do they conflict?

Here is a similar question.

Answer 1

My guess is, you need to install babel-plugin-add-module-exports and in your .babelrc register this plugin:

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

For more information visit this website.