Adding Medium Zoom

sage
1

I’ve read and followed the official documentation.
Installed medium-zoom via yarn, added medium-zoom/dist/medium-zoom.min to main.js. I checked and it gets compiled to main.js.
Then, according to the Medium Zoom docs, I add mediumZoom(document.querySelectorAll('[data-zoomable]'));. So I add that to common.js, and tag my images with data-zoomable.
Now I get an error: mediumZoom is not defined. I’m at a loss Do I have to configure something else in Sage’s webpack config?

2

Instead of adding import 'medium-zoom/dist/medium-zoom.min'; to main.js as specified in the Sage Docs, I took a different approach that works, but is it proper?

In common.js, I included it like this:

import mediumZoom from 'medium-zoom/dist/medium-zoom.min';

export default {
  init() {
    mediumZoom(document.querySelectorAll('[data-zoomable]'));
  }
}