2.0.0 is broken in sveltekit?

[johnvanhulsen]

Hi,

I tried the new version with the docs but I don't have success with it.

The message a received:

Importing binding name 'inview' is not found.`

I try:

import { inview } from 'svelte-inview';
console.log(inview);

And it returns undefined.

The demo on https://svelte-inview.netlify.app is also broken.

[maciekgrzybek]

Hey @johnvanhulsen Thanks for reporting this, not sure what's happening for you to be honest. I just tested it manually to make sure and it all works fine. The demo was broken, but it was because I forgot to update the node_modules for it - it is working now. As for the package itself:

• are you sure you installed the package in version 2.0.0?
• can you show me your package.json file?
• can you show me how are you using the package?

[johnvanhulsen]

Hi @maciekgrzybek,

First, I use Sveltekit for this project.

I've install 2.0.0 by updating my package.json manually and run pnpm install. I can click to the package and see the 2.0.0 sourced in here.

This is my package json:

{
    "name": "msvnl",
    "version": "0.0.1",
    "config": {
        "node": "14"
    },
    "scripts": {
        "dev": "svelte-kit dev",
        "build": "svelte-kit build",
        "preview": "svelte-kit preview",
        "lint": "prettier --check . && eslint --ignore-path .gitignore .",
        "format": "prettier --write ."
    },
    "dependencies": {
        "normalize.css": "^8.0.1"
    },
    "devDependencies": {
        "@sveltejs/adapter-static": "next",
        "@sveltejs/kit": "next",
        "eslint": "^7.25.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-svelte3": "^3.2.0",
        "node-sass": "^5.0.0",
        "prettier": "~2.2.1",
        "prettier-plugin-svelte": "^2.2.0",
        "svelte": "^3.38.2",
        "svelte-inview": "^2.0.0",
        "svelte-preprocess": "^4.7.3",
        "vite": "^2.2.4"
    },
    "type": "module"
}

For the demo I use you're image demo script with text instead of images.

<script>
  import { inview } from 'svelte-inview';

  let isInView;
  const options = {
    rootMargin: '50px',
    unobserveOnEnter: true,
  };

  const handleChange = ({ detail }) => (isInView = detail.inView);
</script>

<div use:inview="{options}" on:change="{handleChange}">
    {#if isInView}
        <h1>IN VIEW</h1>
    {:else}
        <h2>NOT IN VIEW</h2>
    {/if}
</div>

The error message on the screen:

500
Importing binding name 'inview' is not found.

moduleDeclarationInstantiation@[native code]
link@[native code]
link@[native code]
link@[native code]
linkAndEvaluateModule@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]

And in my console: Unhandled Promise Rejection: SyntaxError: Importing binding name 'inview' is not found.

[maciekgrzybek]

I'm not on my laptop now, but can you try installing the package as a normal dependency and not a devDependency?

[johnvanhulsen]

I've tried... Unfortunately. Same results as above.

[maciekgrzybek]

Ok I will investigate it later today. Very weird, it works fine with just svelte template, I haven't tested it with svelte kit.

[maciekgrzybek]

@johnvanhulsen I think I found the issue, can you try updating it to 2.0.1?

[johnvanhulsen]

Yes! Thank you. it works :)

[maciekgrzybek]

Awesome :) I didn't know that in package.json, as a svelte pointer you need to add the source file, instead of the built version :) I guess we learn every day :)