模块导出"Module is not defined"错误

Question

因此，我正在使用RequireJS和React，尝试加载已经安装的第三方组件：

npm install react-autocomplete

结构在这里：https://github.com/rackt/react-autocomplete/tree/master/lib

现在，当requireJS被加载时，我有一个main.js文件，看起来像这样：

require.config({
paths: {
      "react" : "react/react",
      "jsx-transformer" : "react/JSXTransformer",
      "react-autocomplete" : "node_modules/react-autocomplete/lib/main"
    }
});

require(["react"], function(react) {
    console.log("React loaded OK.");
});

require(["jsx-transformer"], function(jsx) {
    console.log("JSX transformer loaded OK.");
});

require(['react-autocomplete'], function (Autocomplete) {
    console.log("React autocomplete component loaded OK.");
    var Combobox = Autocomplete.Combobox;
    var ComboboxOption = Autocomplete.Option;
    console.log("Autocomplete initiated OK");
 });

现在，所有内容都可以正常加载，但第三个 require 语句会抛出一个“模块未定义”的错误，该错误是针对第三方组件中的 main.js 文件的，它看起来像这样：

module.exports = {
  Combobox: require('./combobox'),
  Option: require('./option')
};

我读到说这与我尝试要求 CommonJS 风格的模块有关，但由于我是新手，无法独立解决，希望有人能给我一个清晰的例子，告诉我如何解决这个问题。

- joakimnorberg

Answer 1

RequireJS无法直接加载CommonJS模块。不过，你可以进行最小的修改来加载它们。你需要将它们包装在define调用中，像这样：

RequireJS不能按原样加载CommonJS模块。但是，您可以进行最小的修改以加载它们。您必须将它们包装在define调用中，如下所示：

define(function (require, exports, module) {

  module.exports = {
    Combobox: require('./combobox'),
    Option: require('./option')
  };

});

如果您有一堆需要转换的模块，或者您正在使用以CommonJS模式编写的第三方库，并希望将其作为构建过程的一部分进行转换，则可以使用r.js来执行转换。

- Louis

---

好的，我猜问题在于我将会在第三方组件中摆弄。但还是谢谢！ - joakimnorberg

Answer 2

问题在于requireJS不支持CommonJS模块，只支持AMD。因此，如果第三方库不支持AMD，则需要跳过一些障碍才能使其正常工作。

如果您有选择的话，我建议使用browserify或webpack进行模块加载，因为这些是React社区大多数人选择的工具，并且几乎所有第三方React组件都被发布到npm作为CommonJS模块。

- Brandon Pugh