2

jQuery v3.5.1 standard build works, the slim build does not, what are the missing dependencies for Draggable to work with the jQuery slim build?

Reproduction code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Work -->
    <!-- <script src="https://code.jquery.com/jquery-3.5.1.js"></script> -->
    <!-- Does not work -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>
    <span id="draggable">Drag me around</span>
    <script>
      $('#draggable').draggable()
    </script>
  </body>
</html>

Error in console:

enter image description here

I've tried the following imports to include potential dependencies, but didn't succeed:

import $ from 'jquery/dist/jquery.slim.js'
import 'jquery/src/manipulation/_evalUrl.js'
import 'jquery/src/deprecated/ajax-event-alias.js'
import 'jquery/src/effects.js'
import 'jquery/src/effects/Tween.js'
import 'jquery/src/effects/animatedSelector.js'
import 'jquery-ui/ui/widgets/draggable.js'

And surprisingly, the minified jQuery didn't work either:

import $ from 'jquery/dist/jquery.min.js'
import 'jquery-ui/ui/widgets/draggable.js'

Only the normal build worked:

import $ from 'jquery/dist/jquery.js'
import 'jquery-ui/ui/widgets/draggable.js'
Wenfang Du
  • 8,804
  • 9
  • 59
  • 90
  • Does this answer your question? [What are the differences between normal and slim package of jquery?](https://stackoverflow.com/questions/35424053/what-are-the-differences-between-normal-and-slim-package-of-jquery) – freedomn-m Feb 04 '21 at 09:51
  • 1
    slim build doesn't include any animations - if you want to use them, you can't use slim build - unless you make your own "build" that is slim + bits you need. But generally not worth the hassle unless you have some directive from a non-technical person not to use the "full" jquery (yet slim is ok?) – freedomn-m Feb 04 '21 at 09:53
  • Does this answer your question? https://stackoverflow.com/questions/3143195/can-you-create-a-custom-jquery-library-build/15137834 – freedomn-m Feb 04 '21 at 09:56
  • Last note: modern browsers (chrome at least) have, for some time, cached the compiled versions of js scripts. So full jquery from a CDN will actually load quicker and take up less memory than a custom build on your site. – freedomn-m Feb 04 '21 at 09:57
  • @freedomn-m Hi, thanks for stopping by, I've tried `import $ from 'jquery/dist/jquery.slim.js' import 'jquery/src/manipulation/_evalUrl.js' import 'jquery/src/deprecated/ajax-event-alias.js' import 'jquery/src/effects.js' import 'jquery/src/effects/Tween.js' import 'jquery/src/effects/animatedSelector.js' import 'jquery-ui/ui/widgets/draggable.js'` to include the potential missing parts, but still didn't work, does these include `animations` part you suggested? – Wenfang Du Feb 04 '21 at 10:14
  • 1
    No idea, I would never attempt what it looks like you're attempting as I'd just use the full jquery, which I recommend you do and move on. But you've obviously got a reason (however nefarious, it's no doubt valid for you in your situation), so just trying to help you get there. – freedomn-m Feb 04 '21 at 10:18
  • 1
    @freedomn-m Thanks, I've moved on and used the full build, just hoped somebody would know how. – Wenfang Du Feb 04 '21 at 10:32
  • 1
    Hopefully someone other than me will notice your question and provide an alternative. – freedomn-m Feb 04 '21 at 10:33

0 Answers0