[After 12.0] Migrate to Vite #2370

rashidakanchwala · 2025-06-10T17:18:52Z

Description

Migrating from react-scripts to Vite for faster builds and modern tooling. Resolves #2297 , and #2013

Development Notes

While this PR touches 223 files, ~95% of changes are simply renaming .js files to .jsx.

Some complexities involved Web Worker integration with Vite and required a few changes.

I've tested all the NPM commands and everything works as expected.

Pending verifications

I’ve tried both, but would like to confirm the following with the code owners:

ESM bundles compatibility – @ravi-kumar-pilla to verify
Kedro-Viz usage as a React library – @jitu5 to confirm

QA notes

Please verify:

App builds and runs locally (npm start, npm run build, etc.)
UI interactions work as before
All tests pass (npm test)
Library usage and ESM builds are confirmed by respective owners above

Checklist

Read the contributing guidelines
Opened this PR as a 'Draft Pull Request' if it is work-in-progress
Updated the documentation to reflect the code changes
Added new entries to the RELEASE.md file
Added tests to cover my changes

github-actions · 2025-06-10T17:28:56Z

ARCHITECTURE.md

@@ -17,7 +17,7 @@ Kedro-Viz can exist either as:
 - A standalone web app, which is [published to PyPI](https://pypi.org/project/kedro-viz/) and can be run as a Kedro plugin from the CLI
 - A React component, which is [published to npm](https://www.npmjs.com/package/@quantumblack/kedro-viz) and can be imported into a larger React application

-To allow the Kedro-Viz web app to be used as a Kedro plugin, first the JavaScript app is compiled into a static build, then it is bundled with a simple Python server and [published to PyPI](https://pypi.org/project/kedro-viz/).
+To allow the Kedro-Viz web app to be used as a Kedro plugin, first the JavaScript app is compiled into a static dist, then it is bundled with a simple Python server and [published to PyPI](https://pypi.org/project/kedro-viz/).


📝 [vale] _{reported by reviewdog 🐶}
[Kedro-viz.sentencelength] Try to keep your sentence length to 30 words or fewer.

github-actions · 2025-06-10T17:28:56Z

ARCHITECTURE.md

@@ -17,7 +17,7 @@ Kedro-Viz can exist either as:
 - A standalone web app, which is [published to PyPI](https://pypi.org/project/kedro-viz/) and can be run as a Kedro plugin from the CLI
 - A React component, which is [published to npm](https://www.npmjs.com/package/@quantumblack/kedro-viz) and can be imported into a larger React application

-To allow the Kedro-Viz web app to be used as a Kedro plugin, first the JavaScript app is compiled into a static build, then it is bundled with a simple Python server and [published to PyPI](https://pypi.org/project/kedro-viz/).
+To allow the Kedro-Viz web app to be used as a Kedro plugin, first the JavaScript app is compiled into a static dist, then it is bundled with a simple Python server and [published to PyPI](https://pypi.org/project/kedro-viz/).


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.words] Use instead of 'simple'.

Signed-off-by: rashidakanchwala <[email protected]>

rashidakanchwala · 2025-06-11T07:54:24Z

.babelrc

@@ -19,6 +19,9 @@
        ["babel-plugin-transform-remove-imports", { "test": "\\.(scss)$" }]
      ],
      "presets": ["@babel/preset-env", "@babel/preset-react"]
+    },
+    "test": {
+      "plugins": ["transform-import-meta"]


We're now importing Web Workers in Vite using import.meta.url, but since import.meta isn't transformed by default, we need to use the transform-import-meta Babel plugin to handle it correctly. This ensures the Web Worker paths are resolved properly during the build.

rashidakanchwala · 2025-06-11T07:55:29Z

.gitignore

@@ -25,6 +25,7 @@ cypress/downloads/

 # production
 /build/
+/dist/


In Vite, the build output is dist/ by default. You’ll see this change reflected in a few places.

rashidakanchwala · 2025-06-11T07:56:27Z

index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>


Moved index.html to the project root, as Vite requires it to be there.

rashidakanchwala · 2025-06-11T07:57:38Z

package/kedro_viz/api/apps.py

@@ -67,7 +67,7 @@ def create_api_app_from_project(
    if Path(_HTML_DIR).is_dir():
        # The html is needed when kedro_viz is used in cli but not required when running
        # frontend e2e tests via Cypress
-        app.mount("/static", StaticFiles(directory=_HTML_DIR / "static"), name="static")
+        app.mount("/assets", StaticFiles(directory=_HTML_DIR / "assets"), name="assets")


In Vite, all bundled JS, CSS, and worker files are output under assets/ instead of static/.

rashidakanchwala · 2025-06-11T08:03:57Z

src/actions/graph.js

- */
-const layout = async (instance, state) => instance.graphNew(state);
+// Ensure layoutWorker is assigned
+const layoutWorker = preventWorkerQueues(worker, async (instance, state) => {


Webworkers work differently with Vite. Hence had to make a few changes here

rashidakanchwala · 2025-06-11T08:04:25Z

src/components/draw/draw-layer-names.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import * as d3 from 'd3';
+import { select } from 'd3-selection';


import * as d3 from 'd3'; wasn't allowed in Vite

Signed-off-by: rashidakanchwala <[email protected]>

Makefile

src/store/load-data.js

src/utils/worker.js

Signed-off-by: rashidakanchwala <[email protected]>

ravi-kumar-pilla · 2025-07-11T02:53:58Z

I can confirm there were no ESM changes and the build will happen when the new release is triggered. I can test once again. But for this PR, ESM is fine. The code changes looks fine to me. I will test this locally once again tomorrow.

Also will this PR be merged after run-status or before ?

Thank you @rashidakanchwala

rashidakanchwala · 2025-07-14T10:52:00Z

after run-status actually.

Huongg · 2025-07-14T10:55:24Z

run status has now been merged to main FYI @rashidakanchwala

Signed-off-by: rashidakanchwala <[email protected]>

ravi-kumar-pilla · 2025-07-15T15:37:41Z

Makefile

@@ -1,4 +1,14 @@
-.PHONY: package build
+.PHONY: package build run pytest e2e-tests lint format-fix format-check lint-check secret-scan security-scan strawberry-server version sign-off


Suggested change

.PHONY: package build run pytest e2e-tests lint format-fix format-check lint-check secret-scan security-scan strawberry-server version sign-off

.PHONY: package build run pytest e2e-tests lint format-fix format-check lint-check secret-scan security-scan version sign-off

jitu5 · 2025-07-15T16:00:09Z

Superb work @rashidakanchwala. I tested it locally (Not as React component) and all works well.

To test it as React component I deployed the latest Vite branch to npm as "kedro-vi122": "1.21.0-rc9" and below are the steps I followed:

Checkout https://github.com/kedro-org/kedro-viz-standalone repo
In package.json replace "@quantumblack/kedro-viz": "^11.0.1" to "kedro-vi122": "1.21.0-rc9"
In app.js replace @quantumblack/kedro-viz to kedro-vi122 at 3 places

After above change it should work as expected but I encounter 1st error.

we need to update css path from "kedro-vi122/lib/styles/styles.min.css" to "kedro-vi122/lib/styles.min.css"

After changing the css path, till this point I started getting Kedro-Viz UI, but unable to get flowchart.

With below log error, but I checked with current Kedro-Viz version, it also throw same errors but it works.

To Tested the workflow view as well, As soon as I clicked on workflow tab it throws an error

Note: i think run-not-found-warning.js file is missing import React from 'react';

But as soon as I pass the runData prop, error is gone but here as well flowchart was not rendering.

@rashidakanchwala Let me know if you have any questions.

Signed-off-by: rashidakanchwala <[email protected]>

rashidakanchwala · 2025-07-15T16:52:01Z

could you pls try again @jitu5 , i added import React in all the jsx files.

Huongg · 2025-07-16T10:00:21Z

src/config.js

@@ -159,8 +159,7 @@ export const inputKeyToStateKeyMap = {

 export const PACKAGE_FSSPEC = 'fsspec';

-export const KEDRO_VIZ_DOCS_URL =
-  'https://docs.kedro.org/projects/kedro-viz/';
+export const KEDRO_VIZ_DOCS_URL = 'https://docs.kedro.org/projects/kedro-viz/';
 export const KEDRO_VIZ_PUBLISH_DOCS_URL = `${KEDRO_VIZ_DOCS_URL}share_kedro_viz.html`;


not related to this PR but these link with .html wont work with the new mkdocs anymore after the release. I'll make a separate PR to update them

Huongg

thank you @rashidakanchwala for this massive change. Everything works fine when i run it locally with the new environment, all the animation and interaction int the flowchart seems to remain the same.

jitu5 · 2025-07-17T09:56:05Z

Current Error:
Uncaught SyntaxError: Unexpected token '<' (at 281.worker.js:1:1)

How to test locally after you make changes:

Checkout the current branch
Run npm run lib
Run npm run lib-test:setup
Go to tools/test-lib/react-app/node_modules/@quantumblack/kedro-viz
Copy kedro-viz folder

Prepare the simple react app to test Kedro-Viz npm package

Checkout https://github.com/kedro-org/kedro-viz-standalone repo
Run npm install
Go to node_modules/@quantumblack/kedro-viz
Replace current kedro-viz folder with what we built in last step
Run npm run start

My finding till this point: Looks like the problem is in bundling the workers, in webpack.lib.js if make below changes it started working

Replace entry: './lib/components/app/index.js' to entry: './lib/components/container/container.jsx'
Remove libraryTarget: 'commonjs2' from output object

We need to explore more if the above change is the right or not.

jitu5 · 2025-07-18T17:08:41Z

@rashidakanchwala I tested Vite migration with changes from this PR #2449 in VSCode, and its not working with Uncaught SyntaxError: Cannot use 'import.meta' outside a module error.

ravi-kumar-pilla · 2025-07-18T17:13:10Z

#2449

what happens if we remove type module from here - https://github.com/kedro-org/kedro-viz/pull/2370/files#diff-118392ec1b808eb03ee9b1e09e29bba42b017416142c84d4e53321713c1491afR6 ?

ravi-kumar-pilla · 2025-07-18T17:15:57Z

Also as we discussed yesterday, we need to find a way to bundle the worker for library build too and https://github.com/kedro-org/kedro-viz/pull/2370/files#diff-118392ec1b808eb03ee9b1e09e29bba42b017416142c84d4e53321713c1491afR4 is vite specific way of instantiating worker. So not sure if it works with webpack.

jitu5 · 2025-07-18T17:21:24Z

#2449

what happens if we remove type module from here - https://github.com/kedro-org/kedro-viz/pull/2370/files#diff-118392ec1b808eb03ee9b1e09e29bba42b017416142c84d4e53321713c1491afR6 ?

graph-worker.js?worker_file&type=classic:4 Uncaught SyntaxError: Cannot use import statement outside a module (at graph-worker.js?worker_file&type=classic:4:1)

rashidakanchwala added 5 commits June 9, 2025 15:44

WIP

bedbeba

fixed bundling

4894a5b

fix eslint

f0ce02d

update package.json

abef00a

Merge branch 'main' into chore/migrate-to-vite

33d56b6

github-actions bot reviewed Jun 10, 2025

View reviewed changes

rashidakanchwala added 4 commits June 10, 2025 18:57

fix test-lib

bcad755

Signed-off-by: rashidakanchwala <[email protected]>

revert test-lib stuff

1ab7853

Signed-off-by: rashidakanchwala <[email protected]>

works with test-lib

b9957c6

Signed-off-by: rashidakanchwala <[email protected]>

fixed test

0ceec84

Signed-off-by: rashidakanchwala <[email protected]>

rashidakanchwala changed the title ~~Chore/migrate to vite~~ Migrate to vite Jun 10, 2025

rashidakanchwala commented Jun 11, 2025

View reviewed changes

few changes

e26a71e

Signed-off-by: rashidakanchwala <[email protected]>

rashidakanchwala changed the title ~~Migrate to vite~~ Migrate to Vite Jun 11, 2025

rashidakanchwala self-assigned this Jun 11, 2025

rashidakanchwala added this to Kedro 🔶 and Kedro Wizard 🪄 Jun 11, 2025

github-project-automation bot moved this to Wizard inbox in Kedro Wizard 🪄 Jun 11, 2025

rashidakanchwala marked this pull request as ready for review June 11, 2025 08:20

rashidakanchwala requested review from astrojuanlu, ravi-kumar-pilla and jitu5 as code owners June 11, 2025 08:20

revert to old setupTest

27f9a8a

Signed-off-by: rashidakanchwala <[email protected]>

rashidakanchwala requested review from Huongg and removed request for astrojuanlu June 11, 2025 08:32

ravi-kumar-pilla reviewed Jul 10, 2025

View reviewed changes

Makefile Outdated Show resolved Hide resolved

ravi-kumar-pilla reviewed Jul 10, 2025

View reviewed changes

src/store/load-data.js Outdated Show resolved Hide resolved

ravi-kumar-pilla reviewed Jul 10, 2025

View reviewed changes

src/utils/worker.js Outdated Show resolved Hide resolved

rashidakanchwala added 3 commits July 10, 2025 16:05

fixes based on reviews

661f4eb

Signed-off-by: rashidakanchwala <[email protected]>

remove old comments

a14e2e6

Signed-off-by: rashidakanchwala <[email protected]>

remove old comments

a86c64f

Signed-off-by: rashidakanchwala <[email protected]>

Merge branch 'main' into chore/migrate-to-vite

1b649ee

rashidakanchwala and others added 7 commits July 14, 2025 16:30

Merge branch 'main' into chore/migrate-to-vite

aec065d

Signed-off-by: rashidakanchwala <[email protected]>

merged

98cf140

Signed-off-by: rashidakanchwala <[email protected]>

changed all to jsx

5149d2b

Signed-off-by: rashidakanchwala <[email protected]>

Merge branch 'main' into chore/migrate-to-vite

76fa0e2

fix lib issue

67e6de2

Signed-off-by: rashidakanchwala <[email protected]>

convrt icons to jsx

4907c2a

Signed-off-by: rashidakanchwala <[email protected]>

fix npm build

cd9c101

Signed-off-by: rashidakanchwala <[email protected]>

ravi-kumar-pilla reviewed Jul 15, 2025

View reviewed changes

add import react to all jsx

18d43ae

Signed-off-by: rashidakanchwala <[email protected]>

Huongg reviewed Jul 16, 2025

View reviewed changes

Huongg approved these changes Jul 16, 2025

View reviewed changes

jitu5 mentioned this pull request Jul 17, 2025

[After 12.0] Vite: Worker not loading when using Kedro-viz as npm library #2449

Draft

rashidakanchwala changed the title ~~Migrate to Vite~~ [After 12.0] Migrate to Vite Jul 21, 2025

		@@ -1,4 +1,14 @@
		.PHONY: package build
		.PHONY: package build run pytest e2e-tests lint format-fix format-check lint-check secret-scan security-scan strawberry-server version sign-off

[After 12.0] Migrate to Vite #2370

Are you sure you want to change the base?

[After 12.0] Migrate to Vite #2370

Uh oh!

Conversation

rashidakanchwala commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Development Notes

Pending verifications

QA notes

Checklist

Uh oh!

github-actions bot Jun 10, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Jun 10, 2025

Choose a reason for hiding this comment

Uh oh!

rashidakanchwala Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

rashidakanchwala Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

rashidakanchwala Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

rashidakanchwala Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

rashidakanchwala Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

rashidakanchwala Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ravi-kumar-pilla commented Jul 11, 2025

Uh oh!

rashidakanchwala commented Jul 14, 2025

Uh oh!

Huongg commented Jul 14, 2025

Uh oh!

ravi-kumar-pilla Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

jitu5 commented Jul 15, 2025

Uh oh!

rashidakanchwala commented Jul 15, 2025

Uh oh!

Huongg Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

Huongg left a comment

Choose a reason for hiding this comment

Uh oh!

jitu5 commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jitu5 commented Jul 18, 2025

Uh oh!

ravi-kumar-pilla commented Jul 18, 2025

Uh oh!

ravi-kumar-pilla commented Jul 18, 2025

Uh oh!

jitu5 commented Jul 18, 2025

Uh oh!

Uh oh!

rashidakanchwala commented Jun 10, 2025 •

edited

Loading

rashidakanchwala Jun 11, 2025 •

edited

Loading

jitu5 commented Jul 17, 2025 •

edited

Loading