React集成Material Design Lite时WebPack报错：upgradeAllRegistered不是函数

这个错误的核心含义是：你通过ES模块语法导入的componentHandler对象，在Webpack打包后的代码里并不包含upgradeAllRegistered方法——哪怕你在浏览器控制台能直接访问到全局的componentHandler.upgradeAllRegistered，这是因为Material Design Lite（MDL）的npm包模块导出逻辑和你预期的不一样。

背后的原因 #

MDL最初是为传统的全局浏览器环境设计的，它的npm包采用UMD格式发布。当你用import componentHandler from 'material-design-lite'时，Webpack会按照ES模块的规则解析它，但MDL的默认导出并不是你需要的那个componentHandler实例，而是一个空对象或者其他无关的导出内容；真正的componentHandler其实被自动挂载到了浏览器的window全局对象上。

解决方案 #

方案1：导入整个MDL库，使用全局对象调用方法 #

先导入整个MDL库（触发它的全局注册逻辑），然后在componentDidMount里直接调用window.componentHandler上的方法：

import React, { Component } from 'react';
import 'material-design-lite'; // 导入整个库，让它完成全局注册

class App extends Component {
  componentDidMount() {
    // 直接使用全局环境中的componentHandler
    window.componentHandler.upgradeAllRegistered();
  }

  render() {
    return (
      <div className="mdl-layout mdl-js-layout">
        {/* 你的MDL组件代码 */}
      </div>
    );
  }
}

export default App;

方案2：调整导入方式，正确获取componentHandler #

如果你不想依赖全局对象，可以尝试用require来获取正确的导出：

import React, { Component } from 'react';
const componentHandler = require('material-design-lite').componentHandler;

class App extends Component {
  componentDidMount() {
    componentHandler.upgradeAllRegistered();
  }

  // 其余组件代码...
}

补充说明 #

为什么浏览器控制台能访问到？因为MDL加载完成后会自动把componentHandler挂载到window上，你在控制台直接输入componentHandler时，访问的是这个全局对象；但Webpack的模块隔离机制下，你通过import拿到的是模块导出的内容，和全局对象不是同一个引用，这就导致了代码里报错但控制台能正常调用的矛盾现象。

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