CODEWITHSUNDEEP
javascriptjquerywebpack
Simone Conti
Simone Conti

Reputation: 379

JQuery Easing and WebPack

I have a button that have to hide a frameset and show the following one

This a part of my HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="./js/scripts-bundled.js"></script>

This is where the easing function is called

import $ from "jquery";

class FormController {
  // variables declararations and some code not useful now...

  buttonClicked(evt) {

    this.current_object.animate(
      { opacity: 0 },
      {
        step: function(now, mx) {
        //as the opacity of current_fs reduces to 0 - stored in "now"
        //1. scale current_fs down to 80%
        scale = 1 - (1 - now) * 0.2;
        //2. bring next_fs from the right(50%)
        left = now * 50 + "%";
        //3. increase opacity of next_fs to 1 as it moves in
        opacity = 1 - now;
        this.current_object.css({
          transform: "scale(" + scale + ")",
          position: "absolute"
        });
        this.next_object.css({ left: left, opacity: opacity });
      },
      duration: 800,
      complete: function() {
        this.current_object.hide();
        this.animating = false;
      },
      //this comes from the custom easing plugin
      easing: "easeInOutBack"
    }
  );
}

If I run this code and I click on the button I receive this error Uncaught TypeError: jQuery.easing[this.easing] is not a function

I believe that, for some reason, the easing plugin is not loaded properly.

Is there a way to require it inside the code via Webpack?

Thanks

Upvotes: 1

Views: 1711

Answers (2)

Keval
Keval

Reputation: 41

install jquery.easing,

and for importing to your main.js file just import as: import "jquery.easing";

Upvotes: 0

eleave
eleave

Reputation: 127

I had the same error with jquery.easing and then fix it via Webpack this way:

Add these dependencies to package.json

"dependencies": {
    "jquery": "3.4.1",
    "jquery.easing": "^1.4.1",
    "popper.js": "^1.16"
}

npm run install to install dependencies and import it in your main.js file:

try {
    window.Popper = require('popper.js').default;
    window.jQuery = window.$ = require('jquery');
    require('jquery.easing'); // dat works :3
} catch (e) {}

Then run webpack script (like npm run dev) to make a build for the application. That's works fine for me.

Upvotes: 1

Related Questions