Question

我第一次浏览webapp时遇到此错误（通常是在禁用缓存的浏览器中）。

错误：匿名的define（）模块不匹配：function（require）{

HTML ：

<html>
   .
   .
   .
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script> var require = { urlArgs: "v=0.4.1.32" }; </script>
   <script data-main="assets/js/main" src="assets/js/libs/require.js"></script>
   <script src="assets/js/ace/ace.js?v=0.4.1.32"></script>
   </body>
</html>

JS ：

$(function () {
    define(function (require) {
        // do something
    });
});

任何人都知道这个错误的确切含义及其发生的原因？

source file，github问题页面中的short discussion

Answer 1

就像AlienWebguy所说，根据文档，require.js can blow up if

你有一个匿名的定义（“模块，它们调用了define（），没有字符串ID ”）在它自己的脚本标签中（我假设它们实际上意味着全局范围内的任何地方）
您的模块名称冲突
您使用加载程序插件或匿名模块，但不使用require.js的优化程序来捆绑它们

我在使用browserify和require.js模块构建的bundle时遇到了这个问题。解决方案是：

一个。在加载require.js之前加载脚本标记中的非require.js独立包，或

B中。使用require.js（而不是脚本标记）加载它们

Answer 2

我遇到此错误，因为我将requirejs文件与其他直接包含在脚本标记中的librairies一起包含在内。那些库（如lodash）使用了与require的define冲突的define函数。 requirejs文件是异步加载的，因此我怀疑在其他库定义之后定义了require的定义，因此发生了冲突。

要消除错误，请使用requirejs包含所有其他js文件。

Answer 3

根据docs：

如果您在HTML中手动编写脚本标记以加载带有脚本的脚本   匿名define（）调用，可能会发生此错误。

如果你也见过   在HTML中手动编写脚本标记以加载具有少量脚本的脚本   命名模块，但然后尝试加载最终的匿名模块   与加载的脚本中的一个命名模块具有相同的名称   通过手动编码的脚本标记。

最后，如果你使用加载器   插件或匿名模块（使用no调用define（）的模块   字符串ID）但不要使用RequireJS优化器来组合文件   在一起，可能会发生此错误。优化器知道如何命名   匿名模块正确，以便它们可以与其他组合   优化文件中的模块。

避免错误：



确保通过RequireJS API加载调用define（）的所有脚本。   不要在HTML中手动编写脚本标记以加载具有的脚本   define（）调用它们。



如果手动编写HTML脚本标记代码，请执行   确定它只包含命名模块，以及一个匿名模块   将与该文件中的某个模块具有相同的名称   加载。



如果问题是使用加载程序插件或匿名   模块，但RequireJS优化器不用于文件捆绑，使用   RequireJS优化器。

Answer 4

在开始使用reactjs时，我遇到了问题，作为初学者，docs可能也是用希腊语写的。

我遇到的问题是，大多数初学者的例子都使用＆＃34;匿名定义＆＃34;当你应该使用＆＃34;字符串id＆＃34;。

匿名定义

define(function() {
        return { helloWorld: function() { console.log('hello world!') } };
 })


define(function() {
        return { helloWorld2: function() { console.log('hello world again!') } };
 })

使用字符串ID定义

define('moduleOne',function() {
    return { helloWorld: function() { console.log('hello world!') } };
})

 define('moduleTwo', function() {
      return { helloWorld2: function() { console.log('hello world again!') } };
})

当您使用使用字符串ID 进行定义时，当您尝试使用这样的模块时，您将避免此错误：

require([ "moduleOne", "moduleTwo" ], function(moduleOne, moduleTwo) {
    moduleOne.helloWorld();
    moduleTwo.helloWorld2();
});

Answer 5

请注意，某些浏览器扩展程序可以向页面添加代码。在我的情况下，我有一个“emmet in all textareas”插件与我的requireJs搞砸了。通过在浏览器中检查，确保没有额外的代码添加到文档中。

Answer 6

现有的答案很好地解释了这个问题，但是如果在使用遗留代码之前使用或在requireJS之前包含脚本文件不是一个简单的选项，那么稍微麻烦的解决方法是在脚本标记之前从窗口范围中删除require，然后在之后恢复它。在我们的项目中，它包含在服务器端函数调用之后，但实际上浏览器会看到以下内容：

    <script>
        window.__define = window.define;
        window.__require = window.require;
        window.define = undefined;
        window.require = undefined;
    </script>
    <script src="your-script-file.js"></script>        
    <script>
        window.define = window.__define;
        window.require = window.__require;
        window.__define = undefined;
        window.__require = undefined;
    </script>

不是最好的，但似乎有用，并且节省了大量的折射。

Answer 7

或者您可以使用这种方法。

在代码库中添加require.js
然后通过该代码加载脚本

<script data-main="js/app.js" src="js/require.js"></script>

将执行的操作将在加载require.js后加载脚本。

Answer 8

对于基于 require.js 的项目，我还在浏览器控制台上看到了相同的错误。如 https://requirejs.org/docs/errors.html 处的 MISMATCHED ANONYMOUS DEFINE() MODULES 所述，此错误有多种原因，在我的案例中有趣的一个是：If the problem is the use of loader plugins or anonymous modules but the RequireJS optimizer is not used for file bundling, use the RequireJS optimizer。事实证明，Google Closure 编译器习惯于在构建期间合并/缩小 Javascript 代码。解决方案是移除 Google closure 编译器，转而使用 require.js 的优化器 (r.js) 合并 js 文件。

匿名的define（）模块不匹配

8 个答案: