Importing Kedro-Viz React-Component in Svelte

[notniknot]

In our team we have the strict requirement to use sveltekit for web development.
Therefore, I tried to to embed the Kedro-Viz React-Component via https://github.com/bfanger/svelte-preprocess-react

Unfortunately, I get the following error when importing kedro-viz

6:30:28 PM [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "@quantumblack/kedro-viz"

Internal server error: Worker is not defined
      at t.exports (/Users/XXX/projects/svelte-kedro-viz/node_modules/@quantumblack/kedro-viz/lib/utils/worker.js:101:15)
      at a (/Users/XXX/projects/svelte-kedro-viz/node_modules/@quantumblack/kedro-viz/lib/utils/worker.js:89:15)
      at Object.<anonymous> (/Users/XXX/projects/svelte-kedro-viz/node_modules/@quantumblack/kedro-viz/lib/actions/graph.js:53:52)
      at Module._compile (node:internal/modules/cjs/loader:1275:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
      at Module.load (node:internal/modules/cjs/loader:1133:32)
      at Module._load (node:internal/modules/cjs/loader:972:12)
      at Module.require (node:internal/modules/cjs/loader:1157:19)
      at require (node:internal/modules/helpers:119:18)
      at Object.<anonymous> (/Users/XXX/projects/svelte-kedro-viz/node_modules/@quantumblack/kedro-viz/lib/reducers/graph.js:7:14)
ReferenceError: Worker is not defined
    at t.exports (/Users/XXX/projects/svelte-kedro-viz/node_modules/@quantumblack/kedro-viz/lib/utils/worker.js:101:15)
    at a (/Users/XXX/projects/svelte-kedro-viz/node_modules/@quantumblack/kedro-viz/lib/utils/worker.js:89:15)
    at Object.<anonymous> (/Users/XXX/projects/svelte-kedro-viz/node_modules/@quantumblack/kedro-viz/lib/actions/graph.js:53:52)
    at Module._compile (node:internal/modules/cjs/loader:1275:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Module._load (node:internal/modules/cjs/loader:972:12)
    at Module.require (node:internal/modules/cjs/loader:1157:19)
    at require (node:internal/modules/helpers:119:18)
    at Object.<anonymous> (/Users/XXX/projects/svelte-kedro-viz/node_modules/@quantumblack/kedro-viz/lib/reducers/graph.js:7:14)

Steps to reproduce

1. Create a svelte project structure from the skeleton template npm create svelte@latest svelte-kedro-viz
2. Update the package.json with the following dependencies

	"devDependencies": {
		"@sveltejs/adapter-auto": "^2.0.0",
		"@sveltejs/kit": "^1.5.0",
		"svelte": "^3.54.0",
		"vite": "^4.2.0",
		"svelte-preprocess": "^5.0.3",
		"svelte-preprocess-react": "^0.14.1"
	},
	"dependencies": {
		"@quantumblack/kedro-viz": "^5.3.0"
	},

3. Update the svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import preprocess from "svelte-preprocess";
import preprocessReact from "svelte-preprocess-react/preprocessReact";

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: preprocessReact({
		react: '16.14.0',
		preprocess: preprocess({ sourceMap: true }),
	}),
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	}
};

export default config;

4. Import KedroViz in src/routes/+page.svelte

<script>
    import KedroViz from '@quantumblack/kedro-viz';
</script>

I know this is not how the KedroViz component is meant to be used, but maybe someone has an idea how this might work anyway. Thanks in advance!

[tynandebold]

Thanks for this, @notniknot!

Indeed, this is an interesting use case. I appreciate the detailed steps to reproduce! I'll give it a try sometime soon and come back to you with my findings.