JQueryUI at Ember upgrade

Question

After upgrade and dismissing Bower as recommended: Is there a way to include JQueryUI into an Ember project without using Bower? My project depends heavily of JQueryUI dialogs.

$ ember -v
ember-cli: 3.3.0  
node: 8.11.3  
os: linux x64

Do I have to reintroduce Bower into my project? Like in this old Using jquery in Ember-cli advice?

Expected somebody having experience or at least some idea/hint ... how long will Bower be supported? — toreric, Aug 10 '18 at 07:07
with the release of Ember 3, Bower isn't part of the default app blueprints any more. But because Bower is so much simpler to import from, you should be able to use it as long as you need. That said, as the ability to tree-shake your Ember app becomes an increased reality in the future, using Bower libraries is likely to penalize you a bit, as Ember-CLI may have to include your Bower libraries as global modules even if you only use it in one small location ... — acorncom, Aug 20 '18 at 00:22

NullVoxPopuli · Answer 1 · 2018-08-17T18:35:52.963

3

does this solve your use case?:

ember install ember-auto-import
npm install jquery-ui

and then wherever you need to use it:

import { stuff } from 'jquery-ui';

edited Aug 17 '18 at 18:35

answered Aug 17 '18 at 15:13

NullVoxPopuli

61,906
73
206
352

1

Good hint - this is maybe an option, but I'll try to survive with Bower a bit further, 'cause I'm finished with upgrading and have no immediate problems. Good to see people working on such or nearby issuses! Maybe helpful the next time! Thanks a lot! – toreric Aug 19 '18 at 12:40
How do I use this for importing the `jquery ui` `draggable` method? – Sam Chats Aug 20 '18 at 13:37
I can't say for sure, but I assume you'd import this: https://github.com/jquery/jquery-ui/blob/master/ui/widgets/draggable.js `import draggable from 'jquery-ui/ui/widgets/draggable';` I don't use jquery(ui), so I'm totally guessing there. – NullVoxPopuli Aug 20 '18 at 14:04
1

@NullVoxPopuli Yes, but my file has code like `this.$().draggable(...)`, so the imported draggable is not really the draggable my file is using, right? – Sam Chats Aug 22 '18 at 09:46
I believe so, yes. Looks like jquery-ui is monkey patching previously loaded behavior to add draggable. Does .draggable work at the moment? – NullVoxPopuli Aug 22 '18 at 09:53
@NullVoxPopuli It works with `app.import(...)` in `ember-cli-build.js` of the project, not for local import. See: https://github.com/fossasia/open-event-frontend/blob/17463e6e635fc613a1b27151f899b984022ebf9c/app/components/scheduler/unscheduled-session.js#L10 – Sam Chats Aug 22 '18 at 10:03
ah ok. So, based on how jquery-ui is making that function happen, I don't think local import is possible (I'm like, 98% sure). This would be a limitation of jQuery. – NullVoxPopuli Aug 22 '18 at 10:59
@NullVoxPopuli What to do now :( – Sam Chats Aug 22 '18 at 12:25
I thought you said you had it working? maybe that was just with app.import with bower? you can app.import with npm modules, too – NullVoxPopuli Aug 22 '18 at 12:57
@SamChatswhere are you at with this? I wouldn't want you to be stuck or anything :-\ – NullVoxPopuli Aug 24 '18 at 12:47

score 1 · Answer 2 · answered Mar 24 '19 at 14:19

Including external js through npm package is always suggested. Above answer shows how to do it.

Sometime the developer won't maintain the package. In that case, you have to include it manually to get the latest js for your app.

If you want to include it manually (not depending on the npm package), here is the way to add external js in your application

1) Download the latest stable jquery-ui from their official site.

2) Extract it. Include jquery-ui.js file in your app/vendor/jquery-ui.js

(Where vendor is the home for external js)

3) Once added import the js in ember-cli-build.js file

app.import('vendor/jquery-ui.js');

4) Restart the ember app.

score 0 · Answer 3 · answered Dec 16 '22 at 05:42

I was able to get it to work by adding "jquery-ui": "^1.13.2", to my package.json file.

Inside ember-cli-build.js I added the following

  // jQuery UI
  app.import({
    development: 'node_modules/jquery-ui/dist/jquery-ui.js',
    production: 'node_modules/jquery-ui/dist/jquery-ui.min.js',
  });

  // jQuery UI CSS
  app.import({
    development: 'node_modules/jquery-ui/dist/themes/smoothness/jquery-ui.css',
    production: 'node_modules/jquery-ui/dist/themes/smoothness/jquery-ui.min.css',
  });

JQueryUI at Ember upgrade

3 Answers3

Linked