wailsapp/wails

Unable to use Vue UI frameworks due to `resolve` issues

BigBallard opened this issue · 4 comments

BigBallard commented

Description

I have attempted to install and use two different Vue UI frameworks: Vuetify and Vuestic. After freshly adding either library, I am faced with the same type of error during wails dev:

[vite]: Rollup failed to resolve import "vue" from "../node_modules/vuetify/lib/framework.mjs".
    This is most likely unintended because it can break your application at runtime.
    If you do want to externalize this module explicitly add it to
    `build.rollupOptions.external`
    error during build:
    Error: [vite]: Rollup failed to resolve import "vue" from "../node_modules/vuetify/lib/framework.mjs".
    This is most likely unintended because it can break your application at runtime.
    If you do want to externalize this module explicitly add it to
    `build.rollupOptions.external`

Note that this has never been an issue when developing Vue web applications souly with yarn or npm. What is different with Wails to where libraries are unable to find dependencies that are included already in the package.json file?

To Reproduce

  1. Create a fresh Wails application using vue-ts as the frontend
  2. Open the package.json and observe that vue is indeed a dependency
  3. Add vuetify using yarn add vuetify
  4. Follow the rest of the setup instructions for Vuetify Setup
  5. Run wails dev after setup
  6. Observe the errors described

Expected behaviour

The application builds and runs.

Screenshots

image

Attempted Fixes

No response

System Details

# Wails
Version | v2.9.2

# System
┌───────────────────────────────────────────────────────────────────────────┐
| OS           | Windows 10 Home                                            |
| Version      | 2009 (Build: 22631)                                        |
| ID           | 23H2                                                       |
| Go Version   | go1.22.4                                                   |
| Platform     | windows                                                    |
| Architecture | amd64                                                      |
| CPU          | AMD Ryzen 7 3700X 8-Core Processor                         |
| GPU          | NVIDIA GeForce RTX 3060 Ti (NVIDIA) - Driver: 32.0.15.6603 |
| Memory       | 64GB                                                       |
└───────────────────────────────────────────────────────────────────────────┘

# Dependencies
┌───────────────────────────────────────────────────────┐
| Dependency | Package Name | Status    | Version       |
| WebView2   | N/A          | Installed | 130.0.2849.56 |
| Nodejs     | N/A          | Installed | 20.12.1       |
| npm        | N/A          | Installed | 10.5.0        |
| *upx       | N/A          | Available |               |
| *nsis      | N/A          | Installed | v3.10         |
└─────────────── * - Optional Dependency ───────────────┘

# Diagnosis
Optional package(s) installation details:
  - upx : Available at https://upx.github.io/

Additional context

No response

leaanthony commented

There is no difference... Wails doesn't do anything with the frontend other than issue the commands set in wails.json. If you run those commands manually do you get the same issue?

BigBallard commented

Yaaaaaa this is my bad, for future reference, do frontend related dependency stuff in the actually frontend folder...... I was doing it at root.

  • 👍1
leaanthony commented

Glad you got it fixed! 👍

BigBallard commented

Fixed the code, just not the stupid 🤷‍♂️

  • 😄1