Unable to import library in sveltekit

[blazef104]

Hi!
I have been trying to use Orb with sveltekit however I get the following error in the console

Error: Not found: /node_modules/.vite/deps/process.worker
    at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:395:13)
    at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:236:5)
    at #options.hooks.handle (/node_modules/@sveltejs/kit/src/runtime/server/index.js:41:55)
    at Module.respond (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:233:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

As well as some other errors in the browser

GET http://localhost:5173/node_modules/.vite/deps/process.worker?type=module&worker_file
Loading Worker from “http://localhost:5173/node_modules/.vite/deps/process.worker?type=module&worker_file” was blocked because of a disallowed MIME type (“text/html”).

I have tried to follow the issue in the browser debugger and it seems to suggest it is due to how Orb imports the default view.

Has anyone ever encountered this before or has an idea of how to solve this?

I am not too much of an expert in javascript so I don't really know where to take it from here. I might try to do some more digging in the following days and see if I can get anywhere.

[tonilastre]

Hey! Thanks for trying out orb :)

We haven't tried the integration with svelte yet, only React, Angular, and Vue. So we will check this one as well. Question: Is your project public on GitHub (so we can reproduce it)? If not, we will check that in a new project environment.

In the meantime, what could be happening is the following: Web worker files can't be packaged into a single bundle because the browser needs to be able to fetch the script in order to run it as a web worker context. In some frameworks (e.g. Angular) you need to say via configuration where worker files are in order for them to be provided in the frontend context. All in all, it is about packaging and we will get back to you once we figure out how to configure it for svelte!

[blazef104]

Hey! Thanks for your answer. My project is not public but it was just a very basic test using your example on this git repo. I just created a new project with sveltekit (https://kit.svelte.dev/) and dumped the example in there.

I will try to have a look later today to see if I can find a way in which I can set the config to properly package the web workers :)

[tonilastre]

Here is the answer to the issue: https://kit.svelte.dev/docs/service-workers#during-development

The service worker is bundled for production, but not during development. [...]

That is the reason why the app can't find process.worker during the dev mode because it is not bundled by the framework. When I did this (build and preview) everything worked great:

npm run build && npm run preview

Regardless of that, we still need to see if we can somehow add better fallback checks so Orb moves to the main-thread processing if the web worker fails (to ease out the dev mode in some frameworks). Additionally, I am sure there is a way for this to work in development mode too - there needs to be a way to say to Vite/SvelteKit where to find the web worker file in dev mode.

[blazef104]

That's great news. I created a new project and just added the test code for Orb in +page.svelte, when I do build and preview I still get the following error.

Would you be able to share your successful test?

My main page looks like the following:

<script lang="ts">
	import { Orb } from '@memgraph/orb';
	import { browser } from '$app/environment';

	var container: any;

	if (browser) {
		const nodes: MyNode[] = [
			{ id: 1, label: 'Orb' },
			{ id: 2, label: 'Graph' },
			{ id: 3, label: 'Canvas' }
		];
		const edges: MyEdge[] = [
			{ id: 1, start: 1, end: 2, label: 'DRAWS' },
			{ id: 2, start: 2, end: 3, label: 'ON' }
		];

		const orb = new Orb<MyNode, MyEdge>(container);

		// Initialize nodes and edges
		orb.data.setup({ nodes, edges });

		// Render and recenter the view
		orb.view.render(() => {
			orb.view.recenter();
		});
	}
</script>

<div bind:this={container} />

[tonilastre]

Definitely! Here it is:

The project was created as a Typescript project and it works as ES modules (to have import/export from syntax):

package.json:

{
  ...
  "type": "module",
  "dependencies": {
    "@memgraph/orb": "^0.1.5"
  }
}

+page.svelte:

<script lang="ts">
  import { onMount } from "svelte";
  import { Orb } from "@memgraph/orb";

  let container: HTMLElement;
  let orb: Orb;

  interface MyNode {
    id: number;
    label: string;
  }

  interface MyEdge {
    id: number;
    start: number;
    end: number;
    label: string;
  }

  const nodes: MyNode[] = [
    { id: 1, label: 'Orb' },
    { id: 2, label: 'Graph' },
    { id: 3, label: 'Canvas' },
  ];
  const edges: MyEdge[] = [
    { id: 1, start: 1, end: 2, label: 'DRAWS' },
    { id: 2, start: 2, end: 3, label: 'ON' },
  ];

  onMount(() => {
    orb = new Orb<MyNode, MyEdge>(container);

    orb.data.setup({ nodes, edges });
    orb.view.render(() => {
      orb.view.recenter();
    });

    return () => {
      orb.view.destroy();
    }
  });
</script>

<div class="graph" bind:this={container}></div>

<style>
  .graph {
    width: 400px;
    height: 400px;
  }
</style>

[blazef104]

Hey!
I tried to reproduce your example both on a linux and windows environment and I still get the exact same error as in my previous post. I'll post my package.json if you could just check it against your test just to make sure it is not a version issue. Again apologies if it is something obvious but I'm not really a node/js expert :)

{
	"name": "orbtest",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
		"lint": "prettier --plugin-search-dir . --check . && eslint .",
		"format": "prettier --plugin-search-dir . --write ."
	},
	"devDependencies": {
		"@sveltejs/adapter-auto": "^1.0.0",
		"@sveltejs/adapter-static": "^1.0.6",
		"@sveltejs/kit": "^1.0.0",
		"@typescript-eslint/eslint-plugin": "^5.45.0",
		"@typescript-eslint/parser": "^5.45.0",
		"eslint": "^8.28.0",
		"eslint-config-prettier": "^8.5.0",
		"eslint-plugin-svelte3": "^4.0.0",
		"prettier": "^2.8.0",
		"prettier-plugin-svelte": "^2.8.1",
		"svelte": "^3.54.0",
		"svelte-check": "^3.0.1",
		"tslib": "^2.4.1",
		"typescript": "^4.9.3",
		"vite": "^4.0.0"
	},
	"type": "module",
	"dependencies": {
		"@memgraph/orb": "^0.1.5"
	}
}

[tonilastre]

Maybe you were missing the disable SSR (server-side rendering step) - sorry for not pointing that one too. Sveltekit is primarily for SSR, so you need to explicitly say not to use SSR for things that are frontend only - orb is not a backend library, so it won't work in a node environment.

Here are all the steps on how to integrate and run orb with Sveltekit (using node v18.14.0):

1. Create the skeleton project:

npm create svelte@latest svelte-orb
✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … Yes
✔ Add Prettier for code formatting? … Yes
✔ Add Playwright for browser testing? … No
✔ Add Vitest for unit testing? … Yes

2. Install the dependencies:

npm i
npm i @memgraph/orb

3. Add the file +page.svelte:

<copy the svelte code from above>

4. Add the file +page.ts:

export const ssr = false;

This disables SSR for the orb page because otherwise, the node environment (backend) tries to load orb which is not built for the backend environment.

5. Build and preview:

npm run build
npm run preview

6. You should be able to see this:

[blazef104]

Hey!
thanks for pointing that out. I didn't think about server side rendering. Your solution works perfectly.
I just wanted to share another way of doing this that will not disable SSR on the entire page.
This is useful if you want to create a new component using Orb without having to disable SSR on the single pages.

<script lang="ts">
	import { browser } from '$app/environment';
	import { onMount } from 'svelte';

	var container: any;
	var Orb;

	interface MyNode {
		id: number;
		label: string;
	}

	interface MyEdge {
		id: number;
		start: number;
		end: number;
		label: string;
	}

	const nodes: MyNode[] = [
		{ id: 1, label: 'Orb' },
		{ id: 2, label: 'Graph' },
		{ id: 3, label: 'Canvas' }
	];
	const edges: MyEdge[] = [
		{ id: 1, start: 1, end: 2, label: 'DRAWS' },
		{ id: 2, start: 2, end: 3, label: 'ON' }
	];

	onMount(async () => {
		if (browser) {
			let mmgraph = await import('@memgraph/orb');

			Orb = mmgraph.Orb;
			const orb = new Orb<MyNode, MyEdge>(container);

			// Initialize nodes and edges
			orb.data.setup({ nodes, edges });

			// Render and recenter the view
			orb.view.render(() => {
				orb.view.recenter();
			});
		}
	});
</script>

<div bind:this={container} />

Thanks for your help on this! I believe we can now close this issue :)

[tonilastre]

@blazef104 Thanks for sharing another approach, a more dynamic one with fewer restrictions. 👍