Foundation-sites: Foundation Tabs - Cannot read property 'register' of undefined

[sanderha]

How to reproduce this bug:

1. I added foundation tabs like so:

<ul class="tabs" data-tabs id="dealer-tabs"> </ul> 

and

<div class="tabs-content" data-tabs-content="dealer-tabs"></div>

with of course the correct markup inside of these containers.

1. Included the foundation tabs mixin:
   @include foundation-tabs;
   and the JS

'node_modules/foundation-sites/dist/js/plugins/foundation.core.js',
'node_modules/foundation-sites/dist/js/plugins/foundation.util.mediaQuery.js',
'node_modules/foundation-sites/dist/js/plugins/foundation.util.triggers.js',
'node_modules/foundation-sites/dist/js/plugins/foundation.util.timerAndImageLoader.js', 
'node_modules/foundation-sites/dist/js/plugins/foundation.tabs.js',

What should happen:

No errors in console

What happened instead:

the tabs work as per usual however i get the following error in console:

TypeError: Cannot read property 'register' of undefined
    at new Tabs (compressed.js:1231)
    at HTMLUListElement.<anonymous> (compressed.js:193)
    at Function.each (jquery-2.2.4.min.js:2)
    at n.fn.init.each (jquery-2.2.4.min.js:2)
    at String.<anonymous> (compressed.js:175)
    at Function.each (jquery-2.2.4.min.js:2)
    at Object.reflow (compressed.js:167)
    at n.fn.init.foundation (compressed.js:275)
    at compressed.js:1912

I am using jquery 2.2.4 and Foundation 6.3.0 .

[Deckluhm]

Can you provide a CodePen reproducing the error?

You can fork this one (which comes with Foundation 6.3 assets).

[IamManchanda]

Hmmmnnn,,,, please follow @Deckluhm instructions and also,

'node_modules/foundation-sites/dist/js/plugins/foundation.core.js',
'node_modules/foundation-sites/dist/js/plugins/foundation.util.mediaQuery.js',
'node_modules/foundation-sites/dist/js/plugins/foundation.util.triggers.js',
'node_modules/foundation-sites/dist/js/plugins/foundation.util.timerAndImageLoader.js', 
'node_modules/foundation-sites/dist/js/plugins/foundation.tabs.js',

If in case you want to only include these above js files only in the test case ...... then
You can include these files below within the codepen/jsfiddle settings (and of course remove foundation.min.js) if you are looking for the same

• https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/plugins/foundation.core.min.js
• https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/plugins/foundation.util.mediaQuery.min.js
• https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/plugins/foundation.util.triggers.min.js
• https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/plugins/foundation.util.timerAndImageLoader.min.js
• https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/plugins/foundation.tabs.min.js

[sanderha]

Hey guys I just made a codepan using the HTML from the docs and including the JS I also include:

https://codepen.io/sanderha/pen/BpJYWr?editors=1011#0

I do get an [object Error] error in the console, however there does not seem to be more information.

UPDATE: The error persists using jQuery 1.12.4, 2.2.4, 3.1.1

[Deckluhm]

You just have a missing dependency: foundation.util.keyboard.js

At the bottom of each JS component you have a list of dependencies (here are tabs ones).

[sanderha]

Ah damnit. I see. Thanks.

I'll go stand in the corner of shame now.

[IamManchanda]

YAII .... There is no such corner in this field buddy !

[kball]

Dependencies are going to be much easier come 6.4 (yay true dependency management!) see https://github.com/zurb/foundation-sites/issues/9438