Rouffy•2mo ago

[Svelte + Vite + Deno 2.0] Svelte and Vite configuration without a package.json

Hello, i am trying to setup a deno 2.0 simple project that has svelte (not svelte kit) and vite on it as well as rely only on a deno.json file for the dependency installation instead of package.json. My current situation is, i have the project setup with the needed dependencies inside of the deno.json and i have the vite.config.ts, svelte.config.ts and tsconfig.json setup as well. Initially the project works just fine when you run it with just vite, but when i try to add a Svelte component like the usual App.svelte i am being hit with this vite error

Pre-transform error: Failed to resolve import "svelte/internal/disclose-version" from "src/App.svelte". Does the file exist?

. I am pretty sure that the root cause for this is the fact that the modules with deno 2.0 and deno.json are being installed in a diffrent directory for me on Linux that's .cache/deno, the file mentioned in the vite error is present in the svelte module folder that is in .cache/deno/npm/registry.npmjs.org/svelte/5.15.0/src/internal/. I am not sure what i am supposed to do to make vite look into that path to fetch the file it needs. Thanks in advance for any responses

4 Replies

Birk Skyum•5w ago

do you have a reproduction of this that can be shared?

RouffyOP•5w ago

yes i can give some reproduction steps in a bit Reproduction steps: - Create a folder for the project for example Test Svelte - Enter Test Svelte and run deno init. That will create a deno.json,main.ts and main_test.ts. - The contents of deno.json are as follows :

{
  "tasks": {
    "dev": "vite"
  },
  "imports": {
    "@std/assert": "jsr:@std/assert@1",
    "npm:svelte": "npm:svelte@^5.2.7",
    "npm:vite": "npm:vite@^6.0.0",
    "npm:vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@^5.0.0",
    "npm:@tsconfig/svelte": "npm:@tsconfig/svelte"
  }
}

{
  "tasks": {
    "dev": "vite"
  },
  "imports": {
    "@std/assert": "jsr:@std/assert@1",
    "npm:svelte": "npm:svelte@^5.2.7",
    "npm:vite": "npm:vite@^6.0.0",
    "npm:vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@^5.0.0",
    "npm:@tsconfig/svelte": "npm:@tsconfig/svelte"
  }
}

- Create a index.html in Test Svelte folder with the following contents :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vite + Svelte + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vite + Svelte + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

- Create a svelte.config.ts in Test Svelte folder with the following contents :

import { vitePreprocess } from 'npm:@sveltejs/vite-plugin-svelte'

export default {
    preprocess: vitePreprocess(),
}

import { vitePreprocess } from 'npm:@sveltejs/vite-plugin-svelte'

export default {
    preprocess: vitePreprocess(),
}

- Create a tsconfig.json in Test Svelte folder with the following contents :

{
  "include": ["src/**/*.ts","src/**/*.js", "src/**/*.svelte"]
}

{
  "include": ["src/**/*.ts","src/**/*.js", "src/**/*.svelte"]
}

- Create a vite.config.ts in Test Svelte folder with the following contents :

import { defineConfig } from 'npm:vite'
import { svelte } from 'npm:@sveltejs/vite-plugin-svelte'

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

import { defineConfig } from 'npm:vite'
import { svelte } from 'npm:@sveltejs/vite-plugin-svelte'

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

- Create a src folder in Test Svelte - Create a main.ts in src folder with the following contents :

import { mount } from 'npm:svelte'
import App from './App.svelte'

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

export default app

import { mount } from 'npm:svelte'
import App from './App.svelte'

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

export default app

- Create a App.svelte in src folder with the following contents :

<script lang="ts">

</script>
<main>
Hello world!
</main>

<script lang="ts">

</script>
<main>
Hello world!
</main>

The directory should look as follows : TestSvelte ├── deno.json ├── deno.lock ├── index.html ├── src │ ├── App.svelte │ └── main.ts ├── svelte.config.ts ├── tsconfig.json └── vite.config.ts - Run the project with deno run dev. When going on the hosted page you will be hit with a

Pre-transform error: Failed to resolve import "svelte/internal/disclose-version" from "src/App.svelte". Does the file exist?

Birk Skyum•5w ago

Thank you for the repro - i see the same error is it important for you to use deno.json for config, or would it be fine if I can make it work using the package.json with deno v2 instead? deno has a bit better node compat that way

RouffyOP•4w ago

it is important for me to use deno.json i am aware it would work with package.json

[Svelte + Vite + Deno 2.0] Svelte and Vite configuration without a package.json

Did you find this page helpful?