'Uncaught TypeError: Cannot read property '_init' of undefined' when loading foundation with requirejs

[mareden]

I'm using requirejs to load foundation 6.0.5. The code looks like: requirejs.config({ paths: { 'jquery': '../../../webjars/jquery/2.1.4/jquery', 'text': '../../../webjars/requirejs-text/2.0.10-3/text', 'foundation': '../../../libs/foundation/js/foundation.core' }, shim: { 'foundation': { deps: ['jquery'], exports: 'Foundation' } } });

require(['knockout', 'jquery', 'foundation'], function(ko, $) {
$(document).ready(function() { $(document).foundation(); }); });

With above code, when I load the page, I get error: Uncaught TypeError: Cannot read property '_init' of undefined, seems there is some issue to load foundation with requirejs.

It seems that foundation.core.js invokes Foundation.MediaQuery._init. Does it mean that foundation.core dependes on foundation.util.mediaQuery? But I saw that one parameter of foundation.util.mediaQuery is 'Foundation'. And, what's the preferred way to use foundation 6 with requirejs?

[ketan]

+1. I'm unable to use foundation with requirejs for this same reason that there's a weird cyclic dependency between foundation.core and foundation.util.mediaQuery

[zurbchris]

I think this should work if you update your config to this:

requirejs.config({
  paths: {
    'jquery': '../../../webjars/jquery/2.1.4/jquery',
    'text': '../../../webjars/requirejs-text/2.0.10-3/text',
    'foundation': '../../../libs/foundation/js/foundation.core',
    'zf-media-query': '../../../libs/foundation/js/foundation.util.mediaQuery'
  },
  shim: {
    'foundation': {
      deps: ['jquery', 'zf-media-query'],
      exports: 'Foundation'
    }
  }
});

If this, or something very similar, doesn't work, please let me know and reopen this issue.

[Vhulcan]

@zurbchris Following your code, I still get an error:

Uncaught ReferenceError: Foundation is not defined

This error occurs at these lines, where (I guess) zf-media-query is trying to load its dependency Foundation:

  }, {});
  return styleObject;
}
}(jQuery, Foundation);
define("zf-media-query", function(){});

!function($) {
var FOUNDATION_VERSION = '6.1.1';

[poxip]

+1 Same here.

[themestechnology]

+1 Same here.

Using a CDN in the mean time to get round this

[obust]

+1 here Uncaught TypeError: Cannot read property '_init' of undefined caught in foundation.core.js at line 264 Foundation.MediaQuery._init()

Some help would be very appreciated

[andrinheusser]

JSPM: Importing the minified version works...

[themestechnology]

Something like this will work, I suggest to everyone that you source all .js files without minification and get you app js working, after than you can minify the .js

<script type="text/javascript"> $(document).foundation().ready(function(){ var OffCanvas = new Foundation.OffCanvas($('#offCanvasLeft'), { open_method : 'overlap' , close_on_click : true }); }); </script>

[rebelrebel82]

+1 same

[rebelrebel82]

Some help would be very appreciated