Fancybox is not defined with Sage 10

[P4KM4N]

First thank you for this amazing starter theme/project.

I’m trying to add Fancyapps UI (fancybox 4) to a a WordPress theme I’m developing with Sage 10.

• I installed it with Yarn (I can see the folder in node_module).
• I setup the import in my app.js like so:

import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui";

$(document).ready(() => {

  Fancybox.bind("[data-fancybox]", {
    // Your options go here
  });
  console.log(Fancybox);

});

• In my console I get this message due to the console.log(Fancybox);
  class T extends r{constructor(t,i={}){L=function(){let t=!1;return document.createElement("div").focus({get preventScroll(){return t=!0,!1}}),t}(),super(function(t,i){const s=e(!0,{},t[i.startIndex]||{});r…
  But if I try to write Fancybox in the console I get:

VM767:1 Uncaught ReferenceError: Fancybox is not defined
    at <anonymous>:1:1

I’m clueless how to make it work and I want to do it right and avoid using CDN

Thanks. Sorry for my newbiness.

[P4KM4N]

ok, so the jQuery ready part wasn’t necessary.
And I just needed to make it available global like so:
window.Fancybox = Fancybox;