Not working with SvelteKit

[vigneshksaithal]

Steps to reproduce

##Task: Migrate an existing SvelteKit(using Vite) project to Farm. Run pnpm add @farmfe/core @farmfe/cli. Add this code to farm.config.ts.

import { sveltekit } from "@sveltejs/kit/vite";

export default defineConfig({
  vitePlugins: [sveltekit()],
  compilation: {
    input: {
      index: "./src/app.html",
    },
  },
});
Run pnpm farm build.

### What is expected?

Should build the app.

### What is actually happening?

I am getting this error
```[ Farm ] Using config file at /Users/vigneshks/Projects/Riju/farm.config.ts
[ Farm ] [vite-plugin] vite-plugin-svelte: config "optimizeDeps" is not needed in farm, all of its options will be ignored. Current ignored option is: "exclude"
[ Farm ] [vite-plugin] vite-plugin-svelte: config "optimizeDeps" is not needed in farm, all of its options will be ignored. Current ignored option is: "include"
[ Farm ] [vite-plugin] vite-plugin-svelte: config "optimizeDeps" is not needed in farm, all of its options will be ignored. Current ignored option is: "disabled"
The following Vite config options will be overridden by SvelteKit:
  - root
[vite-plugin] vite-plugin-sveltekit-setup: farm do not support array 'resolve.alias', it will be ignored. you should transform it to farm's alias manually for now.
The following Vite config options will be overridden by SvelteKit:
  - base
  - publicDir
[ Farm ] Build failed due to errors: Can not resolve index.html  from /Users/vigneshks/Projects/Riju.
Error: ENOENT: no such file or directory, stat '/Users/vigneshks/Projects/Riju/index.html'
    at Object.statSync (node:fs:1659:25)
    at checkCompilationInputValue (file:///Users/vigneshks/Projects/Riju/node_modules/.pnpm/@[email protected]/node_modules/@farmfe/core/dist/config/index.js:597:24)
    at normalizeUserCompilationConfig (file:///Users/vigneshks/Projects/Riju/node_modules/.pnpm/@[email protected]/node_modules/@farmfe/core/dist/config/index.js:102:30)
    at resolveConfig (file:///Users/vigneshks/Projects/Riju/node_modules/.pnpm/@[email protected]/node_modules/@farmfe/core/dist/config/index.js:82:44)
    at async build (file:///Users/vigneshks/Projects/Riju/node_modules/.pnpm/@[email protected]/node_modules/@farmfe/core/dist/index.js:41:32)
    at async handleAsyncOperationErrors (file:///Users/vigneshks/Projects/Riju/node_modules/.pnpm/@[email protected]/node_modules/@farmfe/cli/dist/utils.js:111:9)
[ Farm ] [vite-plugin] vite-plugin-svelte: config "optimizeDeps" is not needed in farm, all of its options will be ignored. Current ignored option is: "esbuildOptions"
[ building ] ⠂ transform (1) node_modules/.pnpm/@[email protected]/node_modules/@farmfe/runtime/src/index.ts.farm-runtime     thread '<unnamed>' panicked at crates/plugin_resolve/src/resolver/utils.rs:54:41:
called `Option::unwrap()` on a `None` value
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
 ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command was killed with SIGABRT (Aborted): farm build
vigneshks@MacBook-Air Riju % pnpm farm build
[ Farm ] Using config file at /Users/vigneshks/Projects/Riju/farm.config.ts
[ Farm ] [vite-plugin] vite-plugin-svelte: config "optimizeDeps" is not needed in farm, all of its options will be ignored. Current ignored option is: "exclude"
[ Farm ] [vite-plugin] vite-plugin-svelte: config "optimizeDeps" is not needed in farm, all of its options will be ignored. Current ignored option is: "include"
[ Farm ] [vite-plugin] vite-plugin-svelte: config "optimizeDeps" is not needed in farm, all of its options will be ignored. Current ignored option is: "disabled"
The following Vite config options will be overridden by SvelteKit:
  - root
[vite-plugin] vite-plugin-sveltekit-setup: farm do not support array 'resolve.alias', it will be ignored. you should transform it to farm's alias manually for now.
The following Vite config options will be overridden by SvelteKit:
  - base
  - publicDir
[ Farm ] [vite-plugin] vite-plugin-svelte: config "optimizeDeps" is not needed in farm, all of its options will be ignored. Current ignored option is: "esbuildOptions"
[ building ] ⠂ transform (10) node_modules/.pnpm/[email protected]/node_modules/core-js/modules/web.dom-collections.iterator.js.farm-[ Farm ] Error: Parse `src/app.html` failed.
 Error: Parse `src/app.html` failed.
 Error:
  × Stray end tag "head"
    ╭─[src/app.html:14:1]
 14 │         />
 15 │
 16 │         %sveltekit.head%
 17 │     </head>
    ·     ───────
 18 │
 19 │     <body data-sveltekit-preload-data="hover">
 20 │         <div style="display: contents">%sveltekit.body%</div>
    ╰────

  × Start tag "body" seen but an element of the same type was already open
    ╭─[src/app.html:16:1]
 16 │         %sveltekit.head%
 17 │     </head>
 18 │
 19 │     <body data-sveltekit-preload-data="hover">
    ·     ──────────────────────────────────────────
 20 │         <div style="display: contents">%sveltekit.body%</div>
 21 │     </body>
 22 │ </html>
    ╰────

Potential Causes:
1.The module have syntax error.
2.This kind of module is not supported, you may need plugins to support it

Potential Causes:
1.The module have syntax error.
2.This kind of module is not supported, you may need plugins to support it```

### System Info

```Shell
MacBook Air M1
Node v21.7.1
PNPM v8.15.4
SvelteKit v2.5.3
Svelte v4.2.12

Any additional comments?

No response

[wre232114]

@sveltejs/kit/vite are deeply integrated with Vite, it's not compatible with Farm. You can use @sveltejs/vite-plugin-svelte instead

[vigneshksaithal]

@wre232114 tried with @sveltejs/vite-plugin-svelte but, still getting the same error.

[wre232114]

It seems there are syntax issues in app.html, some plugins that handles app.html may be missing. What's your original vite.config.ts?

[vigneshksaithal]

@wre232114 Here is my vite.config.ts

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [sveltekit()],
});

With Vite it is working fine.

Here is app.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width" />

        <!-- Google font -->
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
            rel="stylesheet"
        />

        %sveltekit.head%
    </head>

    <body data-sveltekit-preload-data="hover">
        <div style="display: contents">%sveltekit.body%</div>
    </body>
</html>

[wre232114]

I checked source code of@sveltejs/kit/vite, it is not compatible with Farm cause it uses Vite-specific APIs like vite.ssrLoadModules

[vigneshksaithal]

Any other way of using it in SvelteKit?

[wre232114]

No for now, a farm-plugin-sveltekit is needed, I hope it can be implemented as soon as possible

[hayd1n]

Why close this issue?

[ErKeLost]

hi @CRT-HAO We have added support for the vite svelte plugin. Do you have any other needs?

[wre232114]

I'll reopen this issue, it would be closed when the plugin is compatible or a alternative plugin is provided

[KyleFontenot]

Bump. Haven't dug into the code yet. but here is my error:

Caused by: Error: Parse `src/app.html` failed.
 Error: Parse `src/app.html` failed.
 Error:   × Stray end tag "head"
    ╭─[src/app.html:34:1]
 31 │ 
 32 │         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
 33 │         %sveltekit.head%
 34 │     </head>
    ·     ───────
 35 │     <body data-sveltekit-preload-data="hover">
 36 │         <!-- <script>
 37 │             const ls = localStorage.getItem('sv-darkmode');
    ╰────
  × Start tag "body" seen but an element of the same type was already open
    ╭─[src/app.html:35:1]
 32 │         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
 33 │         %sveltekit.head%
 34 │     </head>
 35 │     <body data-sveltekit-preload-data="hover">
    ·     ──────────────────────────────────────────
 36 │         <!-- <script>
 37 │             const ls = localStorage.getItem('sv-darkmode');
 38 │             const prefers = window.matchMedia('(prefers-color-scheme: dark)').matches;
    ╰────
  × Invalid first character of tag name
    ╭─[src/app.html:56:1]
 53 │         </script> -->
 54 │ 
 55 │         <div style="display: contents;max-width: 100vw;">
 56 │       %sveltekit.body%<
    ·                        ─
 57 │     </div>
 58 │     </body>
 59 │ </html>
    ╰────

[melMass]

@KyleFontenot you are using sveltekit with the svelte only plugin. (%sveltekit.body%)

As far as I understand there is no way to use farm with sveltekit currently. Any ETA about this? SK is my main framework

[wre232114]

It seems that sveltekit plugin is deeply integrated with Vite, We don't have a ETA