Chrome 45下React应用报Object.assign非函数错误，CRA如何转译node_modules代码

Chrome 45版本未原生支持ES6标准新增的Object.assign方法，CRA默认配置下babel仅转译src目录下的代码，不会处理node_modules内的依赖代码，因此如果依赖包未做兼容处理就会抛出该异常。以下是两种可行修复方案：

方案1：补充polyfill（优先推荐，无需修改转译规则） #

直接全局注入Object.assign的兼容实现，不需要调整node_modules的转译逻辑：

• 安装core-js依赖：

npm install core-js@3 --save

• 在项目入口文件（通常为src/index.js）最顶部引入对应polyfill：

// 仅引入Object.assign的polyfill，体积最小
import 'core-js/features/object/assign';

// 若存在其他ES6+语法兼容问题，可全量引入稳定版polyfill
// import 'core-js/stable';

方案2：修改CRA配置，强制转译对应node_modules依赖 #

如果不想全局注入polyfill，可以调整babel的转译范围，指定对报错的依赖包做语法转译，分两种场景操作：

场景A：未执行eject的CRA项目 #

• 安装配置覆盖工具：

npm install react-app-rewired customize-cra --save-dev

• 修改package.json中的启动命令，替换默认的react-scripts为react-app-rewired：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

• 项目根目录新建config-overrides.js文件，添加需要转译的依赖包路径，将下方的报错依赖包名替换为实际触发错误的依赖名称：

const { override, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/报错依赖包名')
  ])
);

场景B：已执行eject的CRA项目 #

• 打开config/webpack.config.js文件，定位到babel-loader的配置段落
• 在include配置数组中新增需要转译的依赖路径：

include: [
  paths.appSrc,
  // 新增行，替换为实际的依赖包名
  path.resolve(paths.appNodeModules, '报错依赖包名')
]

修复完成后重启项目即可。

内容的提问来源于stack exchange，提问作者user3599672