learning require with javascript

Question

trying to learn require.js - I have a main with require loading a simple function to retrieve the browser window size. I am getting the Uncaught Error: Mismatched anonymous define() module: [object Object] http://requirejs.org/docs/errors.html#mismatch error.

here is both main.js and helper\getwindowsize.js - I don't know what I am doing wrong.

main.js

//determine how much space is available within the browser window
var viewportWidth;
var viewportHeight;

require(["helper/getwindowsize"], function(GetBrowserWindowSize) { getwindowsize.GetBrowserWindowSize(); });

GetBrowserWindowSize(viewportWidth, viewportHeight);
document.write('<p>Your viewport width is '+viewportWidth+'x'+viewportHeight+'</p>');

helper\getwindowsize.js

define(function() 
{
  console.log("Function : GetBrowserWindowSize");

  return 
  {
    GetBrowserWindowSize: function(viewportWidth, viewportHeight)
    {
      // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 
      if (typeof window.innerWidth != 'undefined')
      {
        viewportWidth = window.innerWidth, viewportHeight = window.innerHeight
      }

      // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
      else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !=
               'undefined' && document.documentElement.clientWidth != 0)
      {
        viewportWidth = document.documentElement.clientWidth, viewportHeight = document.documentElement.clientHeight
      }

      // older versions of IE 
      else
      {
        viewportWidth = document.getElementsByTagName('body')[0].clientWidth, viewportHeight = document.getElementsByTagName('body')[0].clientHeight
      }
    }
  }
});

Louis Louis · Accepted Answer · 2013-11-26T11:10:38

I was not able to reproduce the error you reported. There were, however, quite a few other problems, most of which were not RequireJS issues:

Your getwindowsize.js file had a syntax error.
You tried to return values by modifying the parameters passed to GetBrowserWindowSize. JavaScript is a pass-by-value language. If you do:
```
function foo(a) {
    a = ... something else ...;
}

var x = ... something ...;
foo(x);
```
x will still evaluate to what it was before the call to foo. The proper way to do what you want is to return an object with the fields set to the values you want to return.
In main.js you were trying to call GetBrowserWindowSize without properly going through your module.
[This is the only RequireJS issue that was in your code.] In main.js you had code that depends on your module being properly loaded that was outside the callback passed to require. This is flat out wrong. One of the basic rules of RequireJS: everything that depends on a module being loaded must be executed from inside the callback passed to the require or define function that requires the module.

Here are versions of your files that do work fine. (Disclaimer: I did not evaluate the validity of the logic used to get the viewport size.) main.js:

require(["helper/getwindowsize"], function(getwindowsize) {
    //determine how much space is available within the browser window
    var size = getwindowsize.GetBrowserWindowSize();
    document.write('<p>Your viewport width is ' + size.viewportWidth +
                   'x' + size.viewportHeight+'</p>');
});

helper/getwindowsize.js:

define(function() {
    console.log("Function : GetBrowserWindowSize");

    return {
        GetBrowserWindowSize: function () {
        // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
            if (typeof window.innerWidth != 'undefined') {
                return {
                    viewportWidth: window.innerWidth,
                    viewportHeight: window.innerHeight
                };
            }
            // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
            else if (typeof document.documentElement != 'undefined' &&
                     typeof document.documentElement.clientWidth != 'undefined' &&
                   document.documentElement.clientWidth != 0) {
              return {
                  viewportWidth: document.documentElement.clientWidth,
                  viewportHeight: document.documentElement.clientHeight
              };
          }
            // older versions of IE
            else {
                return {
                    viewportWidth: document.getElementsByTagName('body')[0].clientWidth,
                    viewportHeight: document.getElementsByTagName('body')[0].clientHeight
                };
            }
        }
    };
});

When you try these files, make sure that your cache does not interfere with loading the new version.

Edited to add. Here's the index.html file I use:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"/>
    <script type="text/javascript" data-main="main.js" src="js/require.js"></script>
  </head>
  <body>
  </body>
</html>

These are the only files you need:

./main.js
./helper/getwindowsize.js
./index.html
./js/require.js

You get require.js from RequireJS's site.

learning require with javascript

1 Answers