Using grunt requirejs with almond results in “define is not defined”

Question

In my grunt.js file I've got

requirejs: {
    dist: {
        options: {
            almond: true,
            wrap: true,
            modules: [{name: 'main'}],
            mainConfigFile: "src/js/main.js",
            baseUrl: "src/js",
            dir: "tmp/js",
            inlineText: true,
            preserveLicenseComments: false
        }
    }
}

Running grunt requirejs:dist populates the tmp/js directory with some minified files - among others a big main.js file (everything seems to be bundled in this file as expected) - however when I want to include this file like so

<script type="text/javascript" src="tmp/main.js"></script>

It results in an "Uncaught ReferenceError: define is not defined"

The intention behind using almond was that I don't need to load a require.js file to load my opimized file - any idea how to get this to work?

footnote: I've already managed to do it this way, except that previously a main-built.js file has been compiled, however this doesn't seem to be the case anymore (updates... -.-)

David Hogue David Hogue · Accepted Answer · 2013-06-16T00:04:50

So I attempted to setup an empty dir with the following files & folders

/grunt.js
/src/js/main.js
/tmp/js

Here's my grunt.js:

module.exports = function(grunt) {

    grunt.loadNpmTasks("grunt-requirejs");
    grunt.initConfig({
        requirejs: {
            dist: {
                options: {
                    almond: true,
                    wrap: true,
                    modules: [{name: 'main'}],
                    mainConfigFile: "src/js/main.js",
                    baseUrl: "src/js",
                    dir: "tmp/js",
                    inlineText: true,
                    preserveLicenseComments: false
                }
            }
        }
    });

    grunt.registerTask("default", "requirejs");
};

Here's my main.js:

define(function() {
    console.log('hi');
});

I ran these commands in the console:

npm install grunt
npm install requirejs
npm install grunt-requirejs
grunt --gruntfile grunt.js

Grunt output this:

Running "requirejs:dist" (requirejs) task
>> RequireJS optimizer finished
Uncompressed size: 14234 bytes.
Compressed size: 1265 bytes gzipped. (2633 bytes minified)

The resulting file in /tmp/js/main.js did have references to almond. It did not mention the define function though because the js had been minimized. My call to define( was rewritten to n(.

I suspect you may have code outside the minimized file that calls define.

Also, in my other project my mainConfigFile is only referenced as a config file and not loaded in as a module.

Using grunt requirejs with almond results in “define is not defined”

1 Answers