Throw Error when run with tsc && vite build

[kresnasatya]

Version:

• @inertiajs/svelte version: 2.0.0-beta.2

Describe the problem:

I modified the "build" scripts with tsc && vite build && vite build --ssr inside https://github.com/inertiajs/inertia/tree/master/playgrounds/svelte5.
After I run npm run build. The TypeScript compiler complain and throws the error messages.

resources/js/app.ts:10:9 - error TS18047: 'el' is possibly 'null'.

10     if (el.dataset.serverRendered === 'true') {
           ~~

resources/js/app.ts:11:22 - error TS2322: Type 'HTMLElement | null' is not assignable to type 'Element | Document | ShadowRoot'.
  Type 'null' is not assignable to type 'Element | Document | ShadowRoot'.

11       hydrate(App, { target: el, props })
                        ~~~~~~

  node_modules/svelte/types/index.d.ts:414:3
    414   target: Document | Element | ShadowRoot;
          ~~~~~~
    The expected type comes from property 'target' which is declared here on type '{ target: Element | Document | ShadowRoot; props: InertiaAppProps; events?: Record<string, (e: any) => any> | undefined; context?: Map<...> | undefined; intro?: boolean | undefined; recover?: boolean | undefined; }'

resources/js/app.ts:13:20 - error TS2322: Type 'HTMLElement | null' is not assignable to type 'Element | Document | ShadowRoot'.
  Type 'null' is not assignable to type 'Element | Document | ShadowRoot'.

13       mount(App, { target: el, props })
                      ~~~~~~

  node_modules/svelte/types/index.d.ts:395:3
    395   target: Document | Element | ShadowRoot;
          ~~~~~~
    The expected type comes from property 'target' which is declared here on type '{ target: Element | Document | ShadowRoot; props: InertiaAppProps; anchor?: Node | undefined; events?: Record<string, (e: any) => any> | undefined; context?: Map<...> | undefined; intro?: boolean | undefined; }'


Found 3 errors in the same file, starting at: resources/js/app.ts:10

npm error Lifecycle script `build` failed with error:
npm error Error: command failed
npm error   in workspace: @inertiajs/svelte5-playground
npm error   at location: /Users/kresnasatya/Sandbox/inertia/playgrounds/svelte5

It turns out that el parameter inside setup function accepts HTMLElement | null.

inertia/packages/svelte/src/createInertiaApp.ts

Line 14 in 9106d74

el: HTMLElement | null

I see the reason the author do this because the issue #2012 and solved it in PR #2037.

Why I do this?

I have an intuition in the future, Laravel will release a Breeze (Laravel Breeze) template for Inertia and Svelte (especially Svelte 5). Their friends (Inertia + Vue & Inertia + React) in Laravel Breeze use tsc && vite build to compile React & Vue components written in TypeScript.

Laravel Breeze (Inertia + Vue)
https://github.com/laravel/breeze/blob/2c7c669326a66112401358282d53550e2ee526d0/src/Console/InstallsInertiaStacks.php#L166

Laravel Breeze (Inertia + React)
https://github.com/laravel/breeze/blob/2c7c669326a66112401358282d53550e2ee526d0/src/Console/InstallsInertiaStacks.php#L379

Steps to reproduce:

1. Clone inertia project

git clone https://github.com/inertiajs/inertia.git inertia
cd inertia

2. Install JS deps

npm install

3. Build packages

npm run build --workspace=packages --if-present

4. Go to the Svelte 5 playground

cd playgrounds/svelte5

5. Edit "build" "scripts" in package.json.

- "build": "vite build && vite build --ssr"
+ "build": "tsc && vite build && vite build --ssr"

6. Try to run npm run build inside Svelte 5 playground but you will get an error first by TypeScript compiler.

> build
> tsc && vite build && vite build --ssr

error TS5055: Cannot write file '/Users/kresnasatya/Sandbox/inertia/playgrounds/svelte5/postcss.config.cjs' because it would overwrite input file.

error TS5055: Cannot write file '/Users/kresnasatya/Sandbox/inertia/playgrounds/svelte5/tailwind.config.cjs' because it would overwrite input file.

error TS5055: Cannot write file '/Users/kresnasatya/Sandbox/inertia/playgrounds/svelte5/vite.config.js' because it would overwrite input file.


Found 3 errors.

npm error Lifecycle script `build` failed with error:
npm error Error: command failed
npm error   in workspace: @inertiajs/svelte5-playground
npm error   at location: /Users/kresnasatya/Sandbox/inertia/playgrounds/svelte5

7. To solve this error, exclude those three files from compilation steps by set "exclude" in tsconfig.json.

"exclude": [
    "postcss.config.cjs",
    "tailwind.config.cjs",
    "vite.config.js"
  ]

8. Run npm run build again and you will see the expected error from JavaScript.

resources/js/app.ts:10:9 - error TS18047: 'el' is possibly 'null'.

10     if (el.dataset.serverRendered === 'true') {
           ~~

resources/js/app.ts:11:22 - error TS2322: Type 'HTMLElement | null' is not assignable to type 'Element | Document | ShadowRoot'.
  Type 'null' is not assignable to type 'Element | Document | ShadowRoot'.

11       hydrate(App, { target: el, props })
                        ~~~~~~

  node_modules/svelte/types/index.d.ts:414:3
    414   target: Document | Element | ShadowRoot;
          ~~~~~~
    The expected type comes from property 'target' which is declared here on type '{ target: Element | Document | ShadowRoot; props: InertiaAppProps; events?: Record<string, (e: any) => any> | undefined; context?: Map<...> | undefined; intro?: boolean | undefined; recover?: boolean | undefined; }'

resources/js/app.ts:13:20 - error TS2322: Type 'HTMLElement | null' is not assignable to type 'Element | Document | ShadowRoot'.
  Type 'null' is not assignable to type 'Element | Document | ShadowRoot'.

13       mount(App, { target: el, props })
                      ~~~~~~

  node_modules/svelte/types/index.d.ts:395:3
    395   target: Document | Element | ShadowRoot;
          ~~~~~~
    The expected type comes from property 'target' which is declared here on type '{ target: Element | Document | ShadowRoot; props: InertiaAppProps; anchor?: Node | undefined; events?: Record<string, (e: any) => any> | undefined; context?: Map<...> | undefined; intro?: boolean | undefined; }'


Found 3 errors in the same file, starting at: resources/js/app.ts:10

npm error Lifecycle script `build` failed with error:
npm error Error: command failed
npm error   in workspace: @inertiajs/svelte5-playground
npm error   at location: /Users/kresnasatya/Sandbox/inertia/playgrounds/svelte5