Rouffy Comments

Rouffy

Posts Comments

DDeno

•Created by Rouffy on 12/23/2024 in #help

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

i am aware it would work with package.json

8 replies

DDeno

•Created by Rouffy on 12/23/2024 in #help

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

it is important for me to use deno.json

8 replies

DDeno

•Created by Rouffy on 12/23/2024 in #help

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

- 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?

8 replies

DDeno

•Created by Rouffy on 12/23/2024 in #help

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

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>

8 replies

DDeno

•Created by Rouffy on 12/23/2024 in #help

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

yes i can give some reproduction steps in a bit

8 replies