Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

svelte-infinitegrid not working on Svelte@3.19.1

See original GitHub issue

Description

Tried all ways to get it to work. Seems to only work on Codesandbox when tried there, also with a new Svelte development on Codesandbox platform it works but not on local development. Tried to download the zip from Codesandbox and run locally but same error produced. Debuged and found potential issues of environment setup includes packages that might be ommited/differ from local development.

// error output on browser console
Uncaught ReferenceError: svelteInfinitegrid is not defined

package.json file

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^11.0.2",
    "@rollup/plugin-node-resolve": "^7.1.1",
    "rollup": "^1.32.0",
    "rollup-plugin-livereload": "^1.0.4",
    "rollup-plugin-node-builtins": "^2.1.2",
    "rollup-plugin-node-globals": "^1.4.0",
    "rollup-plugin-svelte": "^5.1.1",
    "rollup-plugin-terser": "^5.2.0",
    "svelte": "^3.19.1"
  },
  "dependencies": {
    "@egjs/svelte-infinitegrid": "^3.0.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "sirv-cli": "^0.4.5"
  }
}

rollup.config.js

import svelte from "rollup-plugin-svelte";
import globals from "rollup-plugin-node-globals";
import builtins from "rollup-plugin-node-builtins";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";

const production = !process.env.ROLLUP_WATCH;

export default {
	input: "src/main.js",
	external: ["@egjs/svelte-infinitegrid"],
  output: {
		globals: {
			"@egjs/svelte-infinitegrid" : "svelteInfinitegrid"
		},
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js"
  },
  plugins: [
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file - better for performance
      css: css => {
        css.write("public/build/bundle.css");
      }
    }),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration -
    // consult the documentation for details:
    // https://github.com/rollup/plugins/tree/master/packages/commonjs
    resolve({
      browser: true,
      dedupe: ["svelte"]
    }),
		commonjs(),
		globals(),
    builtins(),
    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload("public"),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser()
  ],
  watch: {
    clearScreen: false
  }
};

function serve() {
  let started = false;

  return {
    writeBundle() {
      if (!started) {
        started = true;

        require("child_process").spawn("npm", ["run", "start", "--", "--dev"], {
          stdio: ["ignore", "inherit", "inherit"],
          shell: true
        });
      }
    }
  };
}