1

I need JQuery UI for dragging and dropping objects in my Ember app. So, after installing via yarn, I import it in the project's ember-cli-build.js as follows:

app.import('bower_components/jquery-ui/jquery-ui.js', {
    using: [{ transformation: 'fastbootShim' }]
});

It gets loaded successfully and drag-drop works fine. However, the form functionality in other part of my codebase breaks with the following error:

TypeError: Ember.$.fn.form.settings is undefined

In this file, $ is imported from jQuery: import $ from 'jquery';

I suspect the import of jquery-ui overrides the behaviour of $ and causes this error. How do I fix this? Am I missing something obvious? Please help, I'm an Ember newbie.

Sam Chats
  • 2,271
  • 1
  • 12
  • 34
  • Just guessing: Try `import 'jquery-ui';` after the `import $ from 'jquery';` – enspandi Aug 22 '18 at 11:54
  • Might also help to use `ember-auto-import` to import npm packages: https://stackoverflow.com/questions/51766188/jqueryui-at-ember-upgrade – enspandi Aug 22 '18 at 11:55
  • @enspandi In which file should I do that? Also, for the question you mentioned in the 2nd comment - I had a bounty on it of 100 pts :), didn't help. – Sam Chats Aug 22 '18 at 12:18
  • 1
    @SamChats do you need jQuery? (my preference is to remove it from ember entirely and never touch it again) – NullVoxPopuli Aug 22 '18 at 19:12
  • Another option is to replace your use of $ with this.element and use native DOM helpers for everything but the ui library. Depending on your codebase size, that might be workable if you run out of options http://youmightnotneedjquery.com This problem with globals is a good reason to try and remove it from Bower as a first step. – handlebears Aug 23 '18 at 09:37
  • @NullVoxPopuli Can't remove it, it's a needed dependency as of now :( – Sam Chats Aug 25 '18 at 07:55
  • What I mean is that if you have to use this dependency and it’s overriding Ember.$, you could stop using $ everywhere else, possibly – handlebears Aug 25 '18 at 10:36

0 Answers0