grunt requirejs 'define is undefined'

Question

I'm trying to optimize RequireJS using GruntJS, using the grunt-contrib-requirejs plugin.

The problem is my code works fine before optimizing it, and then after optimizing it, on the console it says Uncaught ReferenceError: define is not defined.

Here's the Gruntfile.js

module.exports = function (grunt) {
  grunt.loadNpmTasks('grunt-contrib-requirejs');

  grunt.initConfig({
    requirejs: {
        compile : {
            options : {
              name  : 'main',
              baseUrl : ".",
              mainConfigFile : "./main.js",
              out : "./optimized.js",
              preserveLicenseComments: false
           }
        }
}
  })

  grunt.registerTask('default', 'requirejs');

}

Solution 1

As define is a requireJs function it seems you miss to load requireJs or any other AMD loader. If you dont need to load any other AMD module then your complied once, you can use a light weight loader shim like almond.

Solution 2

Adding the require.js file as an "include" option should work.

requirejs: {
    compile : {
        options : {
            name  : 'main',
            baseUrl : ".",
            mainConfigFile : "./main.js",
            out : "./optimized.js",
            preserveLicenseComments: false,
            include: ['path/to/require.js']
        }
    }
}

Comments

[Andreas Köberle]

ok will add this as an answer too.

[streetlight]

@OtskimanotSqilal how did you include it? Did you add it as a seperate script tag or put the minified script in data-main?

[hybrid9]

I'm having a similar issue, but wouldn't that just add requirejs to the output? It doesn't seem like it goes through the optimizer.

[Thomas Higginbotham]

Yes, it does add RequireJS to the output. It's a simple solution to the problem, but using a smaller AMD loader in the minified script (see accepted answer) would be more ideal.