Post optimization problem: Mismatched anonymous define() module:

[AlexDomeshek]

Hi, all! I have successfully run r.js and unified all my java scripts under main.js. But I when I run the app with minified version of main.js I get a following exception: Mismatched anonymous define() module: Any ideas how to resolve this? Thanks in advance!

This is my build.js

({ appDir: ".", baseUrl: "src/main/webapp/js", dir: "../appdirectory-build", modules: [ { name: "main" } ], paths: {

    jquery: "vendors/jquery-1.9.1.min",
    jqueryui:"vendors/jquery-ui-1.10.3.custom.min",
    bootstrap:  "vendors/bootstrap/js/bootstrap",
    templates: '../templates',
    "jquery.ui.widget": "vendors/jquery.ui.widget"

    ,'load-image':      "vendors/load-image",
    'load-image-meta':  "vendors/load-image-meta",
    'load-image-exif':  "vendors/load-image-exif",
    'load-image-ios':   "vendors/load-image-ios",
    'canvas-to-blob':   "vendors/canvas-to-blob",
    'moment':           "vendors/moment.min",
    'backbone':         'vendors/backbone-min',
    'backgrid':         'vendors/backgrid.min',
    'backgrid-select-all':'vendors/backgrid-select-all',
    'modalview':        'vendors/backbone.bootstrap-modal',
    'highlight.regex':  'vendors/highlightRegex.min',
    'bs-paginator':     'vendors/bootstrap-paginator.min',
    'select2':          'vendors/select2.min',
    'text':             'vendors/text'
}

})

This is my main.js

require.config({ baseUrl: "/js", paths: {

    jquery:             ["vendors/jquery-1.9.1.min"],
    jqueryui:           ["vendors/jquery-ui-1.10.3.custom.min"],
    bootstrap:          ["vendors/bootstrap/js/bootstrap"],
    templates:          '/templates',
    "jquery.ui.widget": ["vendors/jquery.ui.widget"]

    ,'load-image':      ["vendors/load-image"],
    'load-image-meta':  ["vendors/load-image-meta"],
    'load-image-exif':  ["vendors/load-image-exif"],
    'load-image-ios':   ["vendors/load-image-ios"],
    'canvas-to-blob':   ["vendors/canvas-to-blob"],
    'moment':           ["vendors/moment.min"],
    'underscore':       ["underscore"],
    'backbone':         ['vendors/backbone'],
    'backbone':         ['vendors/backbone'],
    'backgrid':         ['vendors/backgrid.min'],
    'backgrid-select-all':['vendors/backgrid-select-all'],
    'modalview':        ['vendors/backbone.bootstrap-modal'],
    'highlight.regex':  ['vendors/highlightRegex.min'],
    'bs-paginator':     ['vendors/bootstrap-paginator.min'],
    'select2':          ['vendors/select2.min'],
    'text':             ['vendors/text']
},
shim: {
    underscore: {
        exports: '_'
    },
    "backbone":{
        deps: ["underscore", "jquery"],
        exports: "Backbone"
    },
    "jquery-ui-1.10.3.custom.min" :["jquery"],
    "lib/jquery.event.drag-2.2": ["jquery"],
    "slick/slick.core": ["jquery"],
    "plugins/slick.checkboxselectcolumn": ["jquery"],
    "plugins/slick.autotooltips": ["jquery"],
    "plugins/slick.cellrangedecorator": ["jquery"],
    "plugins/slick.cellrangeselector": ["jquery"],
    "plugins/slick.cellcopymanager": ["jquery"],
    "plugins/slick.cellselectionmodel": ["jquery"],
    "plugins/slick.rowselectionmodel": ["jquery"],
    "controls/slick.columnpicker": ["jquery"],
    "slick/slick.formatters": ["jquery"],
    "slick/slick.editors": ["jquery"],
    "slick/slick.grid": ["jquery"],
    "vendors/toastr.min":["jquery"],
    "bootstrap" :["jquery"],
    "select2" :["jquery"]
    ,"bs-paginator" :["jquery"]
    ,"vendors/backbone-validation":["backbone"]
    ,"vendors/jquery.blockUI":["jquery"]
    ,"vendors/jquery.fileupload":["vendors/jquery.iframe-transport"]
    ,"backgrid":["jquery", "backbone"]
    ,"backgrid-select-all":["backgrid"]
    ,"modalview":["backbone", "bootstrap"]
    ,"highlight.regex":["jquery"]
}

});

require(["app"], function(App) { App.initializeApplication()

});

[jrburke]

That error can happen the following ways:

• when module code is loaded by an explicit HTML script tag in the page for a define() module without it being loaded by a require call. This can be fixed by using require() to load any scripts that have define() calls in them.
• r.js found multiple anonymous defines and skipped naming one of the define()s. This could also be bug jrburke/requirejs#883.

If you think it might be the second issue, to find the source of the problem, in the built files, look for define( calls that do not have a string ID as the first argument. If that is in a particular library, then what you might also see in the build output is a "toTransport" warning saying that it skipped the file.

If you have the source or that module, feel free to point to it here, so it could be used for tests and any eventual fix.

[mattbierner]

I believe I'm seeing this issue when I include the main js-beautify library file:

build.js:

({
    baseUrl: ".",
    normalizeDirDefines: "all",

    paths: {
        'beautify': 'dependencies/beautify/js/lib/beautify',
        ...
    },
    name: "javascripts/console.js",
    out: "javascripts/console-built.js"
})

Build run:

r.js -o build.js optimize=none

Build output:

Tracing dependencies for: javascripts/console.js
dependencies/beautify/js/lib/beautify.js has more than one anonymous define. May be a built file from another build system like, Ender. Skipping normalization.

PROJECT_PATH/javascripts/console-built.js
----------------
...
PROJECT_PATH/dependencies/beautify/js/lib/beautify.js
PROJECT_PATH/javascripts/console.js

Relevant output in console-built.js for js-beautify:

...
 if (typeof define === "function") {
        // Add support for require.js
        if (typeof define.amd === "undefined") {
            define(function(require, exports, module) {
                exports.js_beautify = js_beautify;
            });
        } else {
            // if is AMD ( https://github.com/amdjs/amdjs-api/wiki/AMD#defineamd-property- )
            define([], function() {
                return js_beautify;
            });
        }

    } else if (typeof exports !== "undefined") {
        // Add support for CommonJS. Just put this file somewhere on your require.paths
        // and you will be able to `var js_beautify = require("beautify").js_beautify`.
        exports.js_beautify = js_beautify;
    } else if (typeof window !== "undefined") {
        // If we're running a web page and don't have either of the above, add our one global
        window.js_beautify = js_beautify;
    } else if (typeof global !== "undefined") {
        // If we don't even have window, try global.
        global.js_beautify = js_beautify;
    }
...

[jrburke]

Yes, looks like js-beautify has two defines in there when only one is enough. The second one should work fine in all AMD loaders, so it is best to inform them of it. This will work with all AMD loaders, as requirejs is an AMD loader:

if (typeof define === "function" && define.amd) {
  define([], function() {
    return js_beautify;
  });
}