Doesn't seem to work with Svelte

[laszlo1337]

Hello.

Using svelte 4 I cannot make this library work, here's the error I'm getting:

D:\project-sveltekit\node_modules\pinch-zoom-pan\lib\index.js:1
import { DEFAULT_STATE, MAX_ZOOM, MIN_ZOOM } from './constants';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)

here's how it's set up: ImageZoom.svelte

<script>
    import { create } from 'pinch-zoom-pan'
    import { onMount } from 'svelte'

    export let image

    let rootElement

    onMount(() => {
        const canvas = create({
            element: rootElement,
            minZoom: 0.5,
            maxZoom: 2,
            captureWheel: true,
        })

        return canvas.destroy
    })
</script>

<div bind:this={rootElement} class="root">
    <div class="point">
        <div class="canvas">
            <svelte:component this={image} />
        </div>
    </div>
</div>

<style>
    .root {
        position: relative;
        transform: translateZ(0);
        overflow: hidden;
    }

    .point {
        position: absolute;
        width: 0;
        height: 0;
        transform: translate(0, 0) scale(1);
        transform-origin: center;
        will-change: transform;
    }

    .canvas {
        position: absolute;
        transform: translate(-50%, -50%);
    }
</style>

[SanichKotikov]

Not sure about Svelte but looks like it's related to how you build your project. This package distributes as es6 code only.

[laszlo1337]

That's what is essentially the problem because as far as I know all svelte packages are es6 and this just should work right away (I took a peek into the library code and did not notice anything sus). There's nothing custom about my project build either, the same as if created with create-svelte app starter

[SanichKotikov]

Not sure about create-svelte, never works with it, but maybe it require es6 files as *.mjs and not as *.js (like in this package), or something else...

[laszlo1337]

I have created a PR with updated readme, hopefully saves some time for potential users

Cheers!