Requirements of RequireJS

I got couple of errors in my journey to use RequireJS. Looking at stackoverflow, I see many people stumble thru these problems. Many problems stems thru not reading the complete documentation of ‘require’ and lot of wrong and incomplete noise on internet. When you scroll thru RequireJS site, and see an example, you say oh, yea this is so simple, and with out reading much detail you jump into coding. In this article, I will go thru commons errors you may receive and their fix. In end and we will reach to a working code.

This code is referring to ECMA script5 using TypeScript 1.6. You choose ECMA version in project properties -> “TypeScript Build” pane in visual studio.

Here is my simple ‘Hello world’ application

<!DOCTYPE html>
<html lang="en">
<head>
         <script src="scripts/require.js></script>
</head>
<body>
       <div id="content"></div>
</body>
</html>

Here is my simple module

ModuleA {
      export class A {
        public static add(x: number, y: number): number {
           return x + y;
       }
    };
}

here is app.ts file, which is referring to ‘ModuleA’ which is sitting in scripts/js directory.

/// &lt;reference path="scripts/js/modulea.ts"&gt;
/// &lt;reference path="scripts/typings/requirejs/require.d.ts" &gt;

import moduleA = require('./scripts/js/ModuleA');
import _mA = moduleA.ModuleA;

window.onload = () => {
document.getElementById('content').innerHTML = "Answer:" +         _mA.A.add(2, 2).toString();
};

This is as simple as you can get. But when I tried to run this sample, my first build error was

TS1148 Cannot compile modules unless the ‘–module’ flag is provided.

This is simple, you have to go to Project properties by right clicking on project, choose “typescript build” and then choose “AMD” in module system.

After fixing this, I got the next error:

Error TS2306 File ‘E:/code/Require/Require/scripts/js/moduleA.ts’ is not a module. Require E:\code\Require\Require\app.ts 4

And you look at your code and it clearly says it is a module.  But soon you realize to put an ‘export’ in front of Module.

export ModuleA {
   export class A {
          public static add(x: number, y: number): number {
            return x + y;
          };
   };
};

Now, the code is compiling and running, but there is nothing just a blank page. Nothing on console, no clue what’s going wrong, it is just a blank page. There was no other option for me other than to go back and read RequireJS slowly and thoroughly and then I realized my mistake. I forgot “data-main” attribute in my html.

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

But, after fixing this, i run the application but there is again nothing on the page. But, now i can hit the break-point in my app.ts file. I hit the breakpoint and then F5, but nothing on the screen.

Back to RequireJS Site, now again reading their documentation slowly and thoroughly. And finally i hit to this :

It is possible when using RequireJS to load scripts quickly enough that they complete before the DOM is ready. Any work that tries to interact with the DOM should wait for the DOM to be ready. For modern browsers, this is done by waiting for the DOMContentLoaded event.

However, not all browsers in use support DOMContentLoaded. The domReady module implements a cross-browser method to determine when the DOM is ready. Download the module and use it in your project like so:

/// <reference path="scripts/js/modulea.ts" />
/// <reference path="scripts/typings/requirejs/require.d.ts" />

import moduleA = require('./scripts/js/ModuleA');
import _mA = moduleA.ModuleA;

require(['./scripts/domReady'], function (domReady) {
domReady(function () {
     document.getElementById('content').innerHTML =                      "Answer:" + _mA.A.add(2, 2).toString();
   });
});

Who knew that document.onload which works every where will not work with RequireJS.

However, using “domReady” solved the problem.

HTH

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s