jQuery conflicts....

Hi all,

I'm having an issue applying a bootstrap template to my Spark app. CSS wise all good but when I add the template's css and Parsley JS as well, I'm getting the following messages in the console.

Uncaught TypeError: $ is not a function
    at new Sidemenu (jquery.app.js:12)
    at jquery.app.js:77
    at jquery.app.js:79
Sidemenu @ jquery.app.js:12
(anonymous) @ jquery.app.js:77
(anonymous) @ jquery.app.js:79
parsley.min.js:8 Uncaught ReferenceError: jQuery is not defined
    at parsley.min.js:8
    at parsley.min.js:8

jquery.app.js is the template js file and normally expects jquery loaded before it which I assume it is from the app.js (Spark).

I've tried loading jquery.min.js and a noconflict, but bashing head on wall.

Any guidance appreciated. This seems to be the last hurdle in getting the template going.

Thanks

[email protected]

9 years ago

Level 2

gentle bump. If anyone has an idea?

For now I've gone to the default Spark/Bootstrap template and tweaked a bit but would love to go back to my one I prefer.

Thanks

briang

9 years ago

Level 1

Are you running Spark v4? I am not familiar with the template system you are trying to use, but I have run into a similar jQuery error.

I believe it has something to do with how webpack / mix is including jQuery. Try adding this to your webpack.mix.js file.

mix.autoload({
  jquery: ['$', 'window.jQuery', 'jQuery', 'jquery']
});

Also I noticed that my Vue controllers were each getting a separate copy of jQuery, which caused errors when trying to use JQuery plugins. To fix this I had to require() the plugins at the top of the Vue file. So you could also try requiring jQuery require("jQuery"); at the top of jquery.app.js

1 like

[email protected]

9 years ago

Level 2

Thanks @briang

I'll have a fiddle with that when I get a chance. I did try adding

<script>
    var jQuery = $;
</script>

placed just after the app.js declaration. That seemed to cure the issues I posted but then other surfaced.

For now, I have removed Spark from the main template and call it as part of settings trying to tweak the look and feel of the main.

I found that Spark's tweaks of bootstrap.css caused other issues on some stuff so took quickest option for now!

Please or to participate in this conversation.