Menu icon Foundation
Having trouble using other JS frameworks/plugins with Zurb Template

I am having some issues when trying to use some other JS frameworks and jQuery plugins within the Zurb Foundation Template. For example, I am trying to use snap.svg. I placed the snap.svg.js file in src/assets/js. It automatically gets compiled into dist/assets/js/app.js. Now when I try to view my site I get a JS error that says "Uncaught TypeError: Cannot set property 'eve' of undefined." All of the JS errors I get with a few jQuery plugins are also giving me Uncaught TypeErrors. 

I have a feeling this has something to do with Babel. If I open up the compiled app.js file and remove all of the snap.svg code and replace it with the code from the original snap.svg.js file everything works. So this tells me that whatever babel is changing is causing problems.

Sooo.. am I doing something wrong? I have a pretty much default install of Foundation using the Zurb Template. All I'm doing is placing the snap.svg.js file into the src/assets/js folder. Is there something else I'm missing? I've never used the Zurb Template before so I'm sure there's some aspect I'm not understanding or doing.

Thanks!

Babeljavascript

I am having some issues when trying to use some other JS frameworks and jQuery plugins within the Zurb Foundation Template. For example, I am trying to use snap.svg. I placed the snap.svg.js file in src/assets/js. It automatically gets compiled into dist/assets/js/app.js. Now when I try to view my site I get a JS error that says "Uncaught TypeError: Cannot set property 'eve' of undefined." All of the JS errors I get with a few jQuery plugins are also giving me Uncaught TypeErrors. 

I have a feeling this has something to do with Babel. If I open up the compiled app.js file and remove all of the snap.svg code and replace it with the code from the original snap.svg.js file everything works. So this tells me that whatever babel is changing is causing problems.

Sooo.. am I doing something wrong? I have a pretty much default install of Foundation using the Zurb Template. All I'm doing is placing the snap.svg.js file into the src/assets/js folder. Is there something else I'm missing? I've never used the Zurb Template before so I'm sure there's some aspect I'm not understanding or doing.

Thanks!

Joshua Scott almost 3 years ago

Perhaps the issue relates to the order it is compiled into the same output file (app.js). You may try to rename the file and see if this fixes it.

If that doesn't work, do you know if minification possibly breaks the plugin?

Dustin almost 3 years ago

No, I'm pretty sure it has something to do with the babel conversion. I removed all references to Foundation JS files in the config.yml file. So right now all gulp is doing is taking snap.svg.js, running babel on it, and placing it in dist/assets/js/app.js. The only thing in app.js is just the snap.svg code but converted with babel. I still get the same TypeError. So that confirms to me that its a problem related to Babel and nothing to do with the order or minification.

Joshua Scott almost 3 years ago

I get errors on and off when using babel in my project as well. I'm not sure if we can control the order everything is compile but at least the SCSS is more controllable. As I stated on an earlier post, I basically stop the project, clear the cache, remove the dist content, and restart the project. After that is seems to work for me but it is still annoying.

Sergey Kruglikov over 2 years ago

Hi!

I have similar problem with Snap.svg library. After installed Snap.svg library and added string in config.yml I have error with 'evo' property anyway. Is there a solution?

Dustin over 2 years ago

Hi Sergey,

 

I did get an answer on stackoverflow... http://stackoverflow.com/questions/40639661/babel-breaks-other-javascript-plugins-frameworks

I haven't actually tried that solution yet but I'm sure it would work. 

Sergey Kruglikov over 2 years ago

Hi Dustin,

I do not know why, but the solution does not work.

Comment placed on http://foundation.zurb.com/forum/posts/36974#comment_37141

Dustin over 2 years ago

Did you restart gulp after making your changes to the gulpfile?

Sergey Kruglikov over 2 years ago

yes ;)