Error: Could not resolve './inview'

[hauselin]

Hi, I'm trying to use this component but have been getting the error below. I've tried reinstalling (deleted node_modules and package-lock.json) and also tried npm install --legacy-peer-deps. They didn't fix the problem.

Appreciate any help anyone can provide! Thanks!

➜  yourfeed-frontend git:(main) ✗ npm run dev

> svelte-app@1.0.0 dev
> rollup -c -w

rollup v2.56.3
bundles src/main.js → public/build/bundle.js...
[!] Error: Could not resolve './inview' from node_modules/svelte-inview/src/index.ts
Error: Could not resolve './inview' from node_modules/svelte-inview/src/index.ts
    at error (../node_modules/rollup/dist/shared/rollup.js:151:30)
    at ModuleLoader.handleResolveId (../node_modules/rollup/dist/shared/rollup.js:19862:24)
    at ../node_modules/rollup/dist/shared/rollup.js:19856:26

Here's my package.json:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single"
  },
  "devDependencies": {
    "@iconify/icons-bi": "^1.1.6",
    "@iconify/icons-bx": "^1.1.2",
    "@iconify/icons-ic": "^1.1.11",
    "@iconify/svelte": "^2.0.0",
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "tinro": "^0.6.6"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0",
    "svelte-file-dropzone": "^0.0.15",
    "svelte-infinite-loading": "^1.3.6",
    "svelte-inview": "^2.0.1"
  }
}

rollup.config.js

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';

const production = !process.env.ROLLUP_WATCH;

function serve() {
    let server;

    function toExit() {
        if (server) server.kill(0);
    }

    return {
        writeBundle() {
            if (server) return;
            server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                stdio: ['ignore', 'inherit', 'inherit'],
                shell: true
            });

            process.on('SIGTERM', toExit);
            process.on('exit', toExit);
        }
    };
}

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            compilerOptions: {
                // enable run-time checks when not in production
                dev: !production
            }
        }),
        css({ output: 'bundle.css' }),

        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),
        !production && serve(),
        !production && livereload('public'),
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

[maciekgrzybek]

Hey thanks for creating the issue. Can you show example of how exactly are you using it?

[hauselin]

I'm getting this error simply by importing the component in the demo/starter Svelte app.

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install --save svelte-inview

Changed the default App.svelte script tag to the following:

<script>
    import { inview } from 'svelte-inview';
    export let name;
</script>

Then npm run dev and I get the error.

bundles src/main.js → public/build/bundle.js...
[!] Error: Could not resolve './inview' from node_modules/svelte-inview/src/index.ts

Not sure if it's related to npm/node versions. But here they are:

➜  my-svelte-project npm --version
7.6.3
➜  my-svelte-project node -v
v15.11.0

Thanks for your help! Really appreciate it.

[hauselin]

Oddly enough, if I clone your repository and run the demo, it works.

git clone https://github.com/maciekgrzybek/svelte-inview.git
cd svelte-inview/demo
npm install
npm run dev  # app runs!

But if I delete your package-lock.json first, then your demo breaks.

git clone https://github.com/maciekgrzybek/svelte-inview.git
cd svelte-inview/demo
rm package-lock.json
npm install
npm run dev  # app breaks!

[maciekgrzybek]

I'll take a look hopefully this weekend :)

[hauselin]

Perfect. Thanks!

[maciekgrzybek]

Hey @hauselin if you use the newest version it should work just fine 😊

[hauselin]

Great! It works now. Thanks for the amazing work!