不明白 React / WebPack 中的这个错误是什么意思答案

【问题标题】：Not understanding what this error in React / WebPack mean不明白 React / WebPack 中的这个错误是什么意思
【发布时间】：2018-01-09 13:55:40
【问题描述】：

所以我正在尝试将具有 Material Design Lite 的现有静态站点移动到 React 中。

我使用 Create-React-App 包来创建一个新的 react 应用程序。我运行命令“npm i 'material-design-lite' --save” - 这两个都有效。

现在，在我的 App.JS 文件中，我将其导入。

import componentHandler from 'material-design-lite';

class App extends Component {

   componentDidMount() {
    componentHandler.upgradeAllRegistered();
  }

当我这样做时，我得到了这个错误

TypeError: __WEBPACK_IMPORTED_MODULE_2_material_design_lite___default.a.upgradeAllRegistered 不是函数

它在 componentHandler.upgradeAllRegistered(); 行抱怨

问题是虽然这个功能确实存在。调试的时候可以访问，chrome控制台也可以访问。

这个错误是什么意思？

【问题讨论】：

标签： reactjs webpack material-design-lite

【解决方案1】：

此库不准备用作 es6 模块。您的 import 语句会导入一个空对象，因为 material-design-lite 不会导出任何内容。

你可以像这样导入模块：

import 'material-design-lite';

这会将componentHandler 对象附加到window 对象。您可以通过window.componentHandler 访问它。您只需确保在应用中的任何位置访问它之前进行导入。

【讨论】：

感谢工作。作为参考，我如何知道某个东西是 es5 还是 es6？只是浏览 node_modules 和阅读代码的问题还是有更简单的方法？
你只能从源头上真正看到这一点。如果您不确定它是否是模块化的，您也可以尝试和错误。只需将模块导入一个对象并记录它，看看里面是否有东西。如果不是，通常意味着它不受支持。据我从mdl github repo 可以看出，他们移至另一个支持 es6 模块的库。见Material Components for the web。这甚至可能更适合您的项目。