Question

使用Webpack和Babel编译React和Redux应用程序时，我得到：

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

在某些较旧的浏览器中（＆lt; = Chrome 1，Android 4，Safari 5）。

此问题似乎源于redux和react-redux在exports.__esModule = true;版本中输出行lib，但我的应用程序使用Object.defineProperty代替（因为它们{ {3}}我不这样做。

两种解决方案是：

在loose模式下构建我的应用程序。
导入react-redux/src和redux/src并使用与应用程序相同的.babelrc构建它（一切都不松散）。

只要它们是一致的并且两者都是：

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

和exports.__esModule = true;在我的输出中不共存，一切正常。

我的问题是，什么是正确的解决方案？为什么这只影响旧浏览器？为什么他们会发生冲突？

这是build loosely。

Answer 1

Object.defineProperty在某些Android 4股票浏览器版本上破解，可能还有其他浏览器在Webkit中使用了错误的实现。

检查this bug report 并向and this other one报告了铬项目。

好消息是，您可以应用this polyfill来解决问题。

为简单起见，您只需将该填充物复制并粘贴到捆绑包之前的<script>标记上即可。

这将解决您的问题。

Answer 2

我的猜测是，您需要安装babel-plugin-add-module-exports并在.babelrc注册此插件：

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

有关详细信息，请访问this website。

Answer 3

就我而言，我解决了在入口点添加babel-register库的问题。

在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，只需设置loose：当你使用babel-preset-env时为true。但是对于Webpack 2，松散模式无法解决此问题。

最后，我们发现了这个技巧，有点难看。

O((v+e)c)

并在您的webpack配置文件中。

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

无法分配给只读属性'__esModule'

4 个答案: