Foundation-sites: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

[merlinpatt]

I'm using Meteor but I don't think that's the issue since I tried the same code in the regular console and got the same errors.

I tried doing both $(document).foundation(); for the entire layout and I tried doing this.offCanvas = new Foundation.OffCanvas($('#offCanvasLeft')); but both cases give me the same stack trace (below).

I also tried using a regular HTML non-jQuery element with new Foundation.OffCanvas(document.getElementById('offCanvasLeft') and that gave me this error

// error when using regular element
foundation.js:4158 Uncaught TypeError: this.$element.data is not a function(…)

// stack trace when using .foundation() or .OffCanvas
debug.js:41 Exception from Tracker afterFlush function:
debug.js:41 TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at TypeError (native)
    at OffCanvas._init (http://localhost:3000/packages/zurb_foundation-sites.js?5617ebc8cbe851ac55391427ddd6422e66df21e7:4387:55)
    at new OffCanvas (http://localhost:3000/packages/zurb_foundation-sites.js?5617ebc8cbe851ac55391427ddd6422e66df21e7:4293:10)
    at null.<anonymous> (http://localhost:3000/app/client/templates/nav/side_nav.js?e86a65060bb9d5e37a29aba87121df59bbeb322e:3:24)
    at http://localhost:3000/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8:3338:22
    at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8:3679:12)
    at fireCallbacks (http://localhost:3000/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8:3334:12)
    at null.<anonymous> (http://localhost:3000/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8:3427:5)
    at http://localhost:3000/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8:1788:14
    at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8:2219:12)

[zurbchris]

Ok, that is caused by the fallback to select a transition time for the off-canvas wrapper. Try setting the option for that directly and see if it still gives you issues.

new Foundation.OffCanvas($('selector'), {transitionTime: 500});

or

...data-off-canvas data-transition-time="500"...

[merlinpatt]

I did the first option which got rid of the error. And fixed it.

Edit: I originally said it still wasn't working but it turns out I forgot a dash in data-off-canvas-wrapper and only had data-offcanvas-wrapper

[zurbchris]

So it was working correctly the whole time? Or there's still an issue of accessing the computed style?

[merlinpatt]

Just tried it without the transitionTime fix and it did work. Apologies for the incorrect bug.

To prevent incorrect bug reports like this in the future, I think that it would be helpful if there was some console logging when a plugin can't find the correct data attributes

[zurbchris]

I think that's a great idea, care to write a pr that drops in the proper error handling in our try/catch init? :smile:

[jkmcrg]

Absolutely glorious - I did not forget a dash - & was still getting this error. Adding a transition time fixed it. Real glad you goofed up y'all helped me out! :)