Switch from vue-cli to vite #1026

BenjaminCharmes · 2024-12-02T16:59:22Z

First attempt to switch from vue-cli to vite and a few things to discuss:

I had to use cryptojs instead of crypto (MD5(value).toString(); instead of crypto.createHash("md5").update(value).digest("hex");)
I had to use import.meta.env.BASE_URL instead of process.env.BASE_URL
I remove .browserslistrc and babel.config.js, not useful with vite ?
vite 6.x.x not supported by cypress ? (warning message)
In vite.config.js, I use extensions: [".vue", ".js", ".json"] to not rename all the imports in all the files, but it could be better to take the time to do it ? (e.g. import Navbar from "@/components/Navbar"; to import Navbar from "@/components/Navbar.vue";
Had to rename env variables from VUE_ to VITE_ to make it work without having to import all of them. Should we keep it that way (and also rename them where ever it's needed, e.g. github?) or just import them in the vite.config.js ?

To do:

Rewrite the scripts in package.json ?
Need to fix Bokeh.
Just need to downgrade to Bokeh 2.4.0
import "tinymce/plugins/hr"; not working
Downgrade tinymce to v5
Fix docker -> Fix cypress e2e test in github workflow

codecov · 2024-12-02T17:02:08Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.84%. Comparing base (18ee71c) to head (2aff549).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1026   +/-   ##
=======================================
  Coverage   74.84%   74.84%           
=======================================
  Files          67       67           
  Lines        4631     4631           
=======================================
  Hits         3466     3466           
  Misses       1165     1165

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

First attempt to switch from vue-cli to vite Remove a 'process' that I missed Fix a few thing to make vite work Fix a few thing to make vite work Fix a few thing to make vite work Downgrade Bokeh to 2.4.0 Downgrade tinymce to v5 Temp commit Update yarn build with vite Update yarn build with vite Update yarn build with vite Update yarn build with vite Update docker build for vite Add serve into package.json Update env variable fron VUE_ to VITE_

ml-evs

Comments for myself:

check docker build version info with vite
think about migrating env vars too

ml-evs

Thanks @BenjaminCharmes, great to remove 4000 lines from our lockfile, though we might need to review some of the deps upgrades carefully to make sure they still work. Some initial comments below

webapp/package.json

CHANGELOG.md

ml-evs · 2025-01-11T13:02:03Z

webapp/cypress/component/UserBubbleLoginTest.cy.jsx

@@ -1,10 +1,10 @@
 import { createStore } from "vuex";
 import UserBubbleLogin from "@/components/UserBubbleLogin.vue";
 import NotificationDot from "@/components/NotificationDot.vue";
-import crypto from "crypto";
+import MD5 from "crypto-js/md5";


Think we need to be careful here too, I had a lot of fun getting the crypto-browserify stuff to work recently. The crypto-js library itself is deprecated (see README here: https://www.npmjs.com/package/crypto-js) -- we may need another solution

webapp/index.html

ml-evs · 2025-01-11T13:03:29Z

webapp/package.json

-    "serve": "^14.2.1",
+    "qrcode-vue3": "^1.7.1",
+    "redis": "^4.7.0",
+    "serve": "^14.2.4",
    "stream-browserify": "^3.0.0",


We may not need stream-browserify anymore

ml-evs · 2025-01-11T13:05:42Z

webapp/vue.config.js

-      args[0].meta = {
-        x_datalab_api_url: process.env.VUE_APP_API_URL,
-      };


This is used by the client code quite a lot, we should make sure that the equivalent is done with vite too (I couldn't see it above), should be doable in the same way as the website title

cypress · 2025-01-11T14:50:06Z

datalab Run #2933

Run Properties: Failed #2933 • f199b2f4ea ℹ️: Merge be60e56b4efe87979c4caa5ee60caaab797918a3 into 17ab3575328038e4dc200814c5a3...

Project	`datalab`
Branch Review	`bc/switch-to-vite`
Run status	`Failed #2933`
Run duration	`08m 48s`
Commit	`f199b2f4ea ℹ️: Merge be60e56b4efe87979c4caa5ee60caaab797918a3 into 17ab3575328038e4dc200814c5a3...`
Committer	`Ben Charmes`
View all properties for this run ↗︎

Test results
Failures	`15`
Flaky	`0`
Pending	`0`
Skipped	`0`
Passing	`408`
View all changes introduced in this branch ↗︎

Tests for review

ChemicalFormulaTest.cy.jsx • 1 failed test • Component tests (chrome)

View Output

Test		Artifacts
ChemFormulaInput > renders single element formula correctly		`Test Replay` `Screenshots`

CollectionTableTest.cy.jsx • 1 failed test • Component tests (chrome)

View Output

Test		Artifacts
An uncaught error was detected outside of a test		`Test Replay` `Screenshots`

EquipmentTableTest.cy.jsx • 1 failed test • Component tests (chrome)

View Output

Test		Artifacts
An uncaught error was detected outside of a test		`Test Replay` `Screenshots`

SampleTableTest.cy.jsx • 1 failed test • Component tests (chrome)

View Output

Test		Artifacts
An uncaught error was detected outside of a test		`Test Replay` `Screenshots`

StartingMaterialTableTest.cy.jsx • 1 failed test • Component tests (chrome)

View Output

Test		Artifacts
An uncaught error was detected outside of a test		`Test Replay` `Screenshots`

The first 5 failed specs are shown, see all 15 specs in Cypress Cloud.

Fix aliases in package.json

…lt title in index.html

ml-evs

Two things left:

fix whatever is going on with cypress/support/e2e.js (maybe just try removing it)
at some point, update our package.json so that it launches the dev server for you before running tests, as vue-cli did

ml-evs · 2025-02-25T18:23:49Z

I've pushed a bit further on this in the last few commits, though its really unsatisfactory still. The component tests rae failing with Cannot access [Component] before initialization. With the help of Claude, I've tried to address this with two changes:

Added more node.js polyfills for Vite
- Configured vite-plugin-node-polyfills in both Vite and Cypress configs to support the crypto module in browser environments, since the UserBubble test was failing at least partially for this reason
Resolved a potential circular dependency in resources.js:
- Moved/refactored GRAVATAR_STYLE (which has never been changed) from resources.js to prevent initialization order issues
- The bottom line is that Vite's ESM-based module system is stricter about circular dependencies than vue-cli was, and component tests are particularly sensitive to these initialization order issues

Of the remaining failures, the FormattedItemName test fails for the same reason here, that resources.js is imported. Then all of the dynamic table tests fail, presumably for the same reason... We might need to think about refactoring resources.js generally.

…js allows test to pass

ml-evs · 2025-02-25T18:28:53Z

See e.g. 337b718 for the fix required to FormattedItemName to allow this component test to pass. I don't think we necessarily want to do this change...

BenjaminCharmes force-pushed the bc/switch-to-vite branch from 695e0a4 to 1222921 Compare December 2, 2024 17:00

BenjaminCharmes added enhancement New feature or request webapp For issues/PRs pertaining to the web interface labels Dec 2, 2024

BenjaminCharmes force-pushed the bc/switch-to-vite branch from 52e306e to 5cbd538 Compare December 2, 2024 17:39

BenjaminCharmes force-pushed the bc/switch-to-vite branch from 42814f6 to 7bb9e9f Compare December 10, 2024 14:59

BenjaminCharmes added the build For issues/PRs pertaining to the build or deployment of the package label Dec 10, 2024

BenjaminCharmes force-pushed the bc/switch-to-vite branch 2 times, most recently from da60bee to 5a7a0d7 Compare December 16, 2024 10:44

BenjaminCharmes force-pushed the bc/switch-to-vite branch from 2fa241e to ba6115f Compare December 16, 2024 15:28

Restore app_dockerfile not working in github workflow

a110fb6

ml-evs reviewed Jan 8, 2025

View reviewed changes

ml-evs requested changes Jan 11, 2025

View reviewed changes

ml-evs added 2 commits January 11, 2025 13:12

Use VITE_ prefix in version and docker builds

6beee74

Use vite for custom settings in app entrypoint

0a8a6f9

ml-evs and others added 5 commits January 11, 2025 15:00

Tidy up eslint config; remove babel

7fde0a5

Add override to allow polyfills to be used with vite 6 -- seems to work

c630f3b

Add yarn serve as alias to vite serve

2996b21

Fix aliases in package.json

Fix eslint config for jsx tests

87e99d7

Reset dependencies to their previous version, remove crypto-js, defau…

d8f1254

…lt title in index.html

ml-evs reviewed Jan 15, 2025

View reviewed changes

ml-evs force-pushed the bc/switch-to-vite branch from 60265fe to 42c34e9 Compare February 7, 2025 11:29

Make cypress support import more explicit

e893628

ml-evs force-pushed the bc/switch-to-vite branch from 42c34e9 to e893628 Compare February 13, 2025 13:56

ml-evs added 4 commits February 13, 2025 13:58

Try forcing a spec pattern for cypress config

8e3852e

Add cypress testing library dep

220ecc5

Try to fix component testing with extra vite plugins and tweaks

cfd14f2

Inline gravatar config value in user bubble to avoid circular import

eb5f95b

ml-evs added 3 commits February 25, 2025 17:59

Bump cypress and node-polyfills for vite v6

606bc70

Configure node polyfills for vite

0884bd5

Change syntax to use explcit props in component test

73bb4c6

PLACEHOLDER: illustrative commit showing how removing from resources.…

337b718

…js allows test to pass

Ablate unecessary config from cypress

be60e56

ml-evs added the blocked label Mar 4, 2025

This was referenced Jul 31, 2025

Firefox e2e tests failing for spurious reasons #1289

Closed

Naively bump cypress to v14 #1291

Draft

ml-evs added 3 commits July 31, 2025 12:08

Separate component map from resources to avoid uninitialized imports

e1d175e

Merge branch 'main' into bc/switch-to-vite

2aff549

Use inlined gravatar style

fbdc21a

ml-evs self-assigned this Aug 1, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Switch from vue-cli to vite #1026

Switch from vue-cli to vite #1026

Uh oh!

BenjaminCharmes commented Dec 2, 2024 •

edited by ml-evs

Loading

Uh oh!

codecov bot commented Dec 2, 2024 •

edited

Loading

Uh oh!

ml-evs left a comment

Uh oh!

ml-evs left a comment

Uh oh!

Uh oh!

Uh oh!

ml-evs Jan 11, 2025

Uh oh!

Uh oh!

ml-evs Jan 11, 2025

Uh oh!

ml-evs Jan 11, 2025

Uh oh!

cypress bot commented Jan 11, 2025 •

edited

Loading

Uh oh!

ml-evs left a comment

Uh oh!

ml-evs commented Feb 25, 2025

Uh oh!

ml-evs commented Feb 25, 2025

Uh oh!

Uh oh!

Switch from vue-cli to vite #1026

Are you sure you want to change the base?

Switch from vue-cli to vite #1026

Uh oh!

Conversation

BenjaminCharmes commented Dec 2, 2024 • edited by ml-evs Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Dec 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

ml-evs left a comment

Choose a reason for hiding this comment

Uh oh!

ml-evs left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ml-evs Jan 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ml-evs Jan 11, 2025

Choose a reason for hiding this comment

Uh oh!

ml-evs Jan 11, 2025

Choose a reason for hiding this comment

Uh oh!

cypress bot commented Jan 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

datalab Run #2933

Tests for review

Uh oh!

ml-evs left a comment

Choose a reason for hiding this comment

Uh oh!

ml-evs commented Feb 25, 2025

Uh oh!

ml-evs commented Feb 25, 2025

Uh oh!

Uh oh!

BenjaminCharmes commented Dec 2, 2024 •

edited by ml-evs

Loading

codecov bot commented Dec 2, 2024 •

edited

Loading

cypress bot commented Jan 11, 2025 •

edited

Loading