Svelte Templates Use Component API Removed in Svelte 5

[cedricvanrompay]

Wails version family

v2

Exact Wails version

v2.15.0

Operating System

macOS

Description

The svelte and svelte-ts v2 templates pin svelte: "^5.55.7", but their generated main.js/main.ts still bootstrap the app using the Svelte 4 component instantiation API (new App({ target: ... })). This API was removed in Svelte 5 in favor of mount(). As a result, a freshly scaffolded project builds and runs, but the app renders as a blank page, with a runtime error in the browser console.

This happens on a completely fresh project generated with wails init using the svelte-ts template — no manual changes were made. I also checked the svelte (non-TS) template's source on main and it has the identical issue.

To Reproduce

wails init -n my-app -t svelte-ts
cd my-app
wails dev

Open the app (or the dev server URL in a browser) and check the JS console.

Expected Behavior

The scaffolded "Hello World" App.svelte component renders.

Actual Behavior

The app window/page is blank. The browser console shows:

Uncaught Svelte error: component_api_invalid_new
Attempted to instantiate src/App.svelte with `new App`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.
https://svelte.dev/e/component_api_invalid_new

	in <unknown>

    at component_api_invalid_new (chunk-3LSFQATS.js?v=8bf69bab:280:19)
    at Module.check_target (chunk-6FN3AOA4.js?v=8bf69bab:390:5)
    at new App (App.svelte:1:2)
    ...

Environment

• Wails CLI: v2.15.0
• Go: go1.26.2 darwin/arm64
• Node: v22.18.0
• npm: 10.9.3
• OS: macOS 26.6 (build 25G72), arm64
• Template: svelte-ts (also affects svelte)

Root Cause

v2/pkg/templates/templates/svelte-ts/frontend/src/main.ts (and the equivalent v2/pkg/templates/templates/svelte/frontend/src/main.js) on main contains:

import './style.css'
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app')
})

export default app

This is the Svelte 4 component API. Svelte 5 (pinned via "svelte": "^5.55.7" in both templates' package.json) removed new Component() for client-side mounting; it must be replaced with mount() from the svelte package. See the Svelte 5 migration guide: Components are no longer classes.

I verified this is still present on main as of 2026-08-19, so it is not yet fixed.

Note: this may be related to / compound with #5989 (vite 8 vs. @sveltejs/vite-plugin-svelte peer conflict) — that issue blocks a fresh install entirely, and once worked around, this Svelte 5 API mismatch surfaces next.

Workaround

Update the bootstrap file to use mount():

import { mount } from 'svelte'
import './style.css'
import App from './App.svelte'

const app = mount(App, {
  target: document.getElementById('app')!
})

export default app

Suggested Fix

Update v2/pkg/templates/templates/svelte/frontend/src/main.js and v2/pkg/templates/templates/svelte-ts/frontend/src/main.ts to use the Svelte 5 mount() API instead of new App(...).

To Reproduce

wails init -n my-app -t svelte-ts
cd my-app
wails dev

Expected behaviour

The scaffolded "Hello World" App.svelte component renders.

Screenshots

No response

Attempted Fixes

No response

System Details

# Wails
┌───────────────────┐
| Version | v2.15.0 |
└───────────────────┘

# System
┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
| OS           | MacOS                                                                                                                       |
| Version      | 26.6                                                                                                                        |
| ID           | 25G72                                                                                                                       |
| Branding     |                                                                                                                             |
| Go Version   | go1.26.2                                                                                                                    |
| Platform     | darwin                                                                                                                      |
| Architecture | arm64                                                                                                                       |
| CPU 1        | Apple M1 Max                                                                                                                |
| CPU 2        | Apple M1 Max                                                                                                                |
| GPU          | Chipset Model: Apple M1 Max Type: GPU Bus: Built-In Total Number of Cores: 24 Vendor: Apple (0x106b) Metal Support: Metal 4 |
| Memory       | 64GB                                                                                                                        |
└────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘

# Dependencies
┌────────────────────────────────────────────────────────────────┐
| Dependency                | Package Name | Status    | Version |
| Xcode command line tools  | N/A          | Installed | 2416    |
| Nodejs                    | N/A          | Installed | 22.18.0 |
| npm                       | N/A          | Installed | 10.9.3  |
| *Xcode                    | N/A          | Available |         |
| *upx                      | N/A          | Available |         |
| *nsis                     | N/A          | Available |         |
|                                                                |
└─────────────────── * - Optional Dependency ────────────────────┘

# Diagnosis
Optional package(s) installation details:
  - Xcode: Available at https://apps.apple.com/us/app/xcode/id497799835
  - upx : Available at https://upx.github.io/
  - nsis : More info at https://wails.io/docs/guides/windows-installer/

 SUCCESS  Your system is ready for Wails development!

Additional context

No response

[cedricvanrompay]

I'm happy to write the PR fixing it by the way

[haoku123]

This is the same root cause as the svelte-check error I flagged as pre-existing in #6007, so linking the two.

In #6007 I noted that npm run check on the svelte-ts template reports:

Error: Type 'HTMLElement | null' is not assignable to type 'Document | Element | ShadowRoot'.
  const app = new App({ target: document.getElementById('app') })

I treated that as out of scope there because #5989's acceptance criteria asked to keep the change limited to the peer-range fix. But it's the same line you've identified — svelte-check is complaining about the target argument of an API that Svelte 5 removed altogether, so the type error is a symptom rather than the actual problem.

Confirmed the templates still use the Svelte 4 form, in both variants:

// v2/pkg/templates/templates/svelte/frontend/src/main.js
// v2/pkg/templates/templates/svelte-ts/frontend/src/main.ts
const app = new App({
  target: document.getElementById('app')
})
export default app

And mount is what Svelte 5 exports (verified against svelte@5.56.9):

svelte version: 5.56.9
typeof mount: function

Two notes that may be useful for your PR:

• The target element needs a non-null assertion or a guard to satisfy svelte-check in the TS template, otherwise the type error above survives the migration.
• export default app no longer means the same thing, since mount() returns the component's exports rather than an instance. Worth deciding whether the templates should still export anything.

Go ahead with the PR — I'm not touching this one. #6007 only bumps @sveltejs/vite-plugin-svelte to fix the ERESOLVE install failure and doesn't modify main.js/main.ts, so the two shouldn't conflict. If #6007 lands first you'll get a clean install to test against; if yours lands first mine still applies unchanged.