Невозможно назначить только для чтения свойства '__esModule'

Question

При компиляции среагировать и Redux приложения с Webpack и Бабеля я получаю:

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

В некоторых старых браузерах (< = Chrome 1, Android 4, Safari 5).

Этого вопрос, кажется, проистекает из redux и react-redux вывода линии exports.__esModule = true; в lib сборке, но мое приложение, использующее Object.defineProperty вместо (потому что они build loosely и у меня нет).

Два решения:

1. Строительство моего приложения в режиме loose также.

2. Импорт react-redux/src и redux/src и его изготовление с использованием того же .babelrc, что и приложение (все не свободно).

Пока они согласуются и оба:

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

и exports.__esModule = true; не сосуществуют в моем выходе, все работает.

Вопрос в том, какое правильное решение? Почему это влияет только на старые браузеры? И почему они конфликтуют?

Адрес similar question.

Answer 1

Моя догадка, вам необходимо установить babel-plugin-add-module-exports и в вашем .babelrc регистре этого плагина:

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

Для получения дополнительной информации посетите this website.

Answer 2

Object.defineProperty был поврежден на некоторых версиях браузера Android 4 и, возможно, в других браузерах, которые использовали функцию багги в Webkit.

Проверка this bug report и and this other one сообщается проекту с хромом.

Хорошая новость: вы можете применить this polyfill, чтобы исправить эту проблему.

Чтобы сделать вещи проще, вы можете просто скопировать и вставить этот полиполк в тег <script> перед вашим пакетом.

Это исправит ваши проблемы.

Answer 3

В моем случае я решил добавить библиотеку регистрации babel в пункты входа.

В 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.

Для webpack 1.0 просто установите свободный: true, когда вы используете babel-preset-env. Однако для Webpack 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.

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