Rails 6 webpacker problem importing magnific-popup package

Question

Im using rails 6 and webpacker. Im trying to use a js lib called magnific popup.

yarn add magnific-popup

It relies on jquery so I added to my environment.js :

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

the created a videoPopup.js file :

> import 'magnific-popup'
> 
> document.addEventListener("turbolinks:load", function (event) {  
> $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
>     disableOn: 700,
>     type: 'iframe',
>     mainClass: 'mfp-fade',
>     removalDelay: 160,
>     preloader: false,
> 
>     fixedContentPos: false   }); });

Then in application.js

require('./videoPopups')

In the browser I get :

Uncaught TypeError: $(...).magnificPopup is not a function

$() (jquery) seems to be defined though and returns the html nodes.

What am I missing here ? How can I debug this ?