frappe-ui version 0.1.63 fails to run

Frappe Framework Customization
1

@netchampfaris
Used frappe-ui starter project to add frappe-ui to my custom frappe app. But, it by default adds frappe-ui version 0.0.105. frappeui.com website seems to document for the latest version of frappe-ui (I guess 0.1.63).

What’s the correct way to upgrade frappe-ui version?

When I update my package.json to refer to frappe-ui version 0.1.63, running ‘yarn dev’ fails saying it can not find vite dev server. How do I fix it? I am running on node 18.20.3.

2

Change the version of frappe ui in your package json then run yarn update after that cd to your frontend app and run yarn dev

3

I assume you meant to run ‘yarn’ first and then ‘yarn dev’. I did run ‘yarn’. That works fine but ‘yarn dev’ fails with the below error. What am I missing:

failed to load config from /home/randhir/frappe-bench/apps/wellnest/frontend/vite.config.js
error when starting dev server:
Error: Cannot find module ‘frappe-ui/src/utils/vite-dev-server’
Require stack:

  • /home/randhir/frappe-bench/apps/wellnest/frontend/vite.config.js
  • /home/randhir/frappe-bench/apps/wellnest/frontend/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
    at Module._load (node:internal/modules/cjs/loader:981:27)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:177:18)
    at Object. (/home/randhir/frappe-bench/apps/wellnest/frontend/vite.config.js:38:30)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at _require.extensions. [as .js] (file:///home/randhir/frappe-bench/apps/wellnest/frontend/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:66355:24)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    error Command failed with exit code 1.
4

Apologies, I meant once you change the version of frappe ui in your package json run yarn install when inside the directory where the package json is. Thsi should be inside your frontend frappe app.

5

Follow the process here

6

Yes, I do run that from the frontend folder itself. Doesn’t work.

I didn’t use doppio to add frappe-ui, I used frappe-ui-starter from here: GitHub - netchampfaris/frappe-ui-starter: A Vite + Vue 3 + TailwindCSS + Frappe UI starter template for building frontends for Frappe Apps

7

Use doppio. I use it and its awesome.

8

Yeah, ripped apart existing one. And then used doppio to add it. That works. Thank you for your time!

Most of the places refer frappe-ui-starter for adding it to any custom app. I am wondering how no one ever faced issue upgrading.

9

You are very much welcome.