Support Vite

[brillout]

Is supporting Vite on Deno's radar?

Although many Node.js libraries already work with Deno, Vite is a whole different beast and probably needs changes on Deno's side.

Note that it's not only about supporting Vite, but also its entire ecosystem (SvelteKit, vite-plugin-ssr, etc.).

FYI Bun is working on supporting Vite: https://github.com/oven-sh/bun/issues/250#issuecomment-1195153860.

[bartlomieju]

Vite is currently unusable with deno. Dev server hangs very often. It looks like some kind of deadlock.

What OS are you using? Which Deno version are you running?

[Lesiuk]

apple m1 macosx, deno 1.18.2.

I will try to debug it tomorrow to know what is the issue.

[bartlomieju]

apple m1 macosx, deno 1.18.2.

I will try to debug it tomorrow to know what is the issue.

I'm pretty sure it's 1.28.2, there's no chance it worked on 1.18.2 :P please let me know if it works fine if you downgrade to 1.28.1, I have a suspicion what might be the problem

[acedeb]

FYI I added several templates to create-vite-extra that you can use via following command:

$ deno run -A --unstable npm:create-vite-extra

I tried combining the deno-svelte template and the sveltekit starter template npm create svelte@latest my-app to use sveltekit with deno. However, I am unable to get it to work and just keep getting the following error (deno v1.28.2) when I open http://localhost:5173/:

Is there something wrong with my config/setup or is it not possible to use sveltekit with deno (though it seemed to be mentioned that it worked in a comment above)?

[mooxl]

When I start the dev server in Vite with Solid for the first time, the following error message is displayed:

error when starting dev server:
Error: Cannot find package.json from /Users/max/progg/mooxl/testing/deno_vite
    at crawlFrameworkPkgs (file:///Users/max/progg/mooxl/testing/deno_vite/node_modules/.deno/vite-plugin-solid@2.4.0/node_modules/vitefu/src/index.js:17:11)
    at async config (file:///Users/max/progg/mooxl/testing/deno_vite/node_modules/.deno/vite-plugin-solid@2.4.0/node_modules/vite-plugin-solid/dist/esm/index.mjs:52:31)
    at async runConfigHook (file:///Users/max/progg/mooxl/testing/deno_vite/node_modules/.deno/vite@3.2.5/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63173:25)
    at async resolveConfig (file:///Users/max/progg/mooxl/testing/deno_vite/node_modules/.deno/vite@3.2.5/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:62676:14)
    at async createServer (file:///Users/max/progg/mooxl/testing/deno_vite/node_modules/.deno/vite@3.2.5/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:61943:20)
    at async CAC.<anonymous> (file:///Users/max/progg/mooxl/testing/deno_vite/node_modules/.deno/vite@3.2.5/node_modules/vite/dist/node/cli.js:707:24)

I have tried using every version of deno from 1.28.0 on but the issue still persists. Any help would be greatly appreciated.

[theArianit]

I think there is something wrong with the solid template and it seems it has to be fixed by the guys who ported solid for deno vite.

[itsdouges]

Deno v1.25.4 makes it much easier to run Vite in Deno, here's an example repo that you can give a try: https://github.com/bartlomieju/vite-deno-example

Keep in mind that for now we focused our efforts on the Vue template, so expect some bugs in other templates, but we're getting there! Feedback and bug reports are much appreciated so keep them coming.

Huge thanks to @dsherret for all the work that made it possible.

Hey mate, the paper cut with dependencies seems... more than a paper cut. Is there any suggestions of what we need to do to teach vite (and realistically, any other bundler) about npm specifiers so we don't need to import them in modules ran inside deno first? It's not just peer dependencies, it's all dependencies used in the frontend app.

Does there exist Deno APIs that I can use to write a vite plugin? I was hoping import.meta.resolve would be it but unfortunately not.

error: Uncaught TypeError: "npm:" specifiers are currently not supported in import.meta.resolve()

[bartlomieju]

Deno v1.25.4 makes it much easier to run Vite in Deno, here's an example repo that you can give a try: https://github.com/bartlomieju/vite-deno-example Keep in mind that for now we focused our efforts on the Vue template, so expect some bugs in other templates, but we're getting there! Feedback and bug reports are much appreciated so keep them coming. Huge thanks to @dsherret for all the work that made it possible.

Hey mate, the paper cut with dependencies seems... more than a paper cut. Is there any suggestions of what we need to do to teach vite (and realistically, any other bundler) about npm specifiers so we don't need to import them in modules ran inside deno first? It's not just peer dependencies, it's all dependencies used in the frontend app.

Does there exist Deno APIs that I can use to write a vite plugin? I was hoping import.meta.resolve would be it but unfortunately not.

error: Uncaught TypeError: "npm:" specifiers are currently not supported in import.meta.resolve()

Vite's bundler (Parcel) would need to be thought how to resolve npm: specifiers, most likely using a plugin. The plugin could call out to deno info <package_name> to get the location of a package in Deno's cache (and download a package if one is not yet cached).

[andykais]

I am attempting to run sveltekit in deno and I see these errors: deno run --reload -A npm:vite dev

  VITE v4.0.1  ready in 2806 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
The following dependencies are imported but could not be resolved:

  esm-env (imported by /Users/andrew.kaiser/Library/Caches/deno/npm/registry.npmjs.org/@sveltejs/kit/1.0.0/src/runtime/app/environment.js)
  devalue (imported by /Users/andrew.kaiser/Library/Caches/deno/npm/registry.npmjs.org/@sveltejs/kit/1.0.0/src/runtime/client/client.js)

Are they installed?
TypeError: Cannot read properties of undefined (reading 'body')
    at handleResponse (deno:ext/flash/01_http.js:259:19)
    at deno:ext/flash/01_http.js:578:25
Failed to load url esm-env (resolved id: esm-env). Does the file exist?
TypeError: Cannot read properties of undefined (reading 'body')
    at handleResponse (deno:ext/flash/01_http.js:259:19)
    at deno:ext/flash/01_http.js:578:25
4:15:10 PM [vite-plugin-svelte] ssr compile done.
package             files     time     avg
deno-sveltekit-1.0      1   30.8ms  30.8ms

I was curious if these modules had trouble resolving in deno, but that does not appear to be the case:

$ deno repl
Deno 1.29.1
exit using ctrl+d, ctrl+c, or close()
> import * as test from 'npm:esm-env'
undefined
> test
Module { BROWSER: false, DEV: false }
> import * as test from 'npm:devalue'
undefined
> test
Module {
  parse: [Function: parse],
  stringify: [Function: stringify],
  uneval: [Function: uneval],
  unflatten: [Function: unflatten]
}

so my best guess is that vite/sveltekit is doing something weird here like executing a node program via cli. When I look at each permission grant I can see they do execute esbuild directly, so perhaps that is whats going on?

⚠️  ┌ Deno requests run access to "/Users/andrew/Library/Caches/deno/npm/registry.npmjs.org/@esbuild/darwin-arm64/0.16.7/bin/esbuild".
   ├ Requested by `Deno.Command().spawn()` API
   ├ Run again with --allow-run to bypass this prompt.
   └ Allow? [y/n] (y = yes, allow; n = no, deny) >

[bartlomieju]

@andykais does this problem go away if you import these packages in the config file?

[itsdouges]

Deno v1.25.4 makes it much easier to run Vite in Deno, here's an example repo that you can give a try: https://github.com/bartlomieju/vite-deno-example

Keep in mind that for now we focused our efforts on the Vue template, so expect some bugs in other templates, but we're getting there! Feedback and bug reports are much appreciated so keep them coming.

Huge thanks to @dsherret for all the work that made it possible.

Hey mate, the paper cut with dependencies seems... more than a paper cut. Is there any suggestions of what we need to do to teach vite (and realistically, any other bundler) about npm specifiers so we don't need to import them in modules ran inside deno first? It's not just peer dependencies, it's all dependencies used in the frontend app.

Does there exist Deno APIs that I can use to write a vite plugin? I was hoping import.meta.resolve would be it but unfortunately not.

error: Uncaught TypeError: "npm:" specifiers are currently not supported in import.meta.resolve()

Vite's bundler (Parcel) would need to be thought how to resolve npm: specifiers, most likely using a plugin. The plugin could call out to deno info <package_name> to get the location of a package in Deno's cache (and download a package if one is not yet cached).

Thanks, it's Rollup but same same. Is there a JS api for info/cache or it's only CLI? (JS would be useful here). I imagine this would be, for each import found that is probably from node modules, find package json, find dependency, find version, and then hit Deno APIs, eventually resolving to the cache location for said dependency.

I've been toying with the shipping a storybook like experience with Deno + Vite, so this is a big hurdle I need to jump over to get it working. Any thoughts would be appreciated. I also have an issue open here about this: https://github.com/denoland/deno/issues/17043

[itsdouges]

Looks deno info isn't showing local cache location for npm modules:

➜  FAZE git:(main) ✗ deno info npm:react
type: Unknown
dependencies: 2 unique
size: 329.09KB

npm:react - 18.2.0 (308.7KB)
└─┬ npm:loose-envify@1.4.0 (5.68KB)
  └── npm:js-tokens@4.0.0 (14.72KB)
➜  FAZE git:(main) ✗

Compare that with

➜  FAZE git:(main) ✗ deno info https://deno.land/std/http/file_server.ts
Warning Implicitly using latest version (0.168.0) for https://deno.land/std/http/file_server.ts
local: /Users/douges/Library/Caches/deno/deps/https/deno.land/b0304a012ef9bfddbd95eee3080183e712f9e621b688e8e8e5032b6313c8ce63
type: TypeScript
dependencies: 46 unique
size: 650.32KB

Does this need to be a feature request? 😅

[bartlomieju]

I've been toying with the shipping a storybook like experience with Deno + Vite, so this is a big hurdle I need to jump over to get it working. Any thoughts would be appreciated. I also have an issue open here about this: https://github.com/denoland/deno/issues/17043

Yes, let's move the discussion on this particular topic to that issue.

[andykais]

does this problem go away if you import these packages in the config file?

@bartlomieju I imported these in vite.config.js and svelte.config.js and the error persists:

// vite.config.js
import 'npm:esm-env'
import 'npm:devalue'
import { sveltekit } from 'npm:@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
    plugins: [sveltekit()]
};

export default config;

// svelte.config.js
import 'npm:esm-env'
import 'npm:devalue'
import adapter from 'npm:@sveltejs/adapter-auto';
import { vitePreprocess } from 'npm:@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: vitePreprocess(),

    kit: {
        adapter: adapter()
    }
};

export default config;

[bartlomieju]

Thanks @andykais that needs more debugging, let's move this discussion to https://github.com/denoland/deno/issues/16513

[char8x]

Vite is currently unusable with deno. Dev server hangs very often. It looks like some kind of deadlock.

Same problem here.

Reproduce Step

deno run -A npm:create-vite-extra --template deno-react-ts
# Project name: example
cd example
deno task dev

then page just show blank like below

Environment

macOS 12.6.2 arm64 deno 1.29.1

[felix-schindler]

I've spent an hour creating an import map rewriting all the npm / node imports to run the Vite dev server in a SvelteKit project.

I had to edit some files of SvelteKit to import { process } from "process";, because otherwise it's not defined.

In the end the dev server ran, but there was this error when trying to access the site in a browser:

TypeError: Cannot read properties of undefined (reading 'body')
    at handleResponse (deno:ext/flash/01_http.js:259:19)
    at deno:ext/flash/01_http.js:578:25

[bartlomieju]

I've spent an hour creating an import map rewriting all the npm / node imports to run the Vite dev server in a SvelteKit project.

I had to edit some files of SvelteKit to import { process } from "process";, because otherwise it's not defined.

In the end the dev server ran, but there was this error when trying to access the site in a browser:

TypeError: Cannot read properties of undefined (reading 'body')
    at handleResponse (deno:ext/flash/01_http.js:259:19)
    at deno:ext/flash/01_http.js:578:25

@felix-schindler we are aware of this problem, see https://github.com/denoland/deno/issues/17248 where we discuss the fix with SvelteKit maintainers (it's because SvelteKit overrides global Web APIs available in Deno with ones in undici)

[AsafMah]

When running samples from https://github.com/bluwy/create-vite-extra

I get: Firefox can’t establish a connection to the server at ws://localhost:5173/.

Changing the ports and playing with the config doesn't help.

I'm on windows 11.

[sant123]

When running samples from https://github.com/bluwy/create-vite-extra

I get: Firefox can’t establish a connection to the server at ws://localhost:5173/.

Changing the ports and playing with the config doesn't help.

I'm on windows 11.

Same on Fedora 36 using Google Chrome

[sant123]

[AnInternetTroll]

On February 25, 2023 5:14:36 PM GMT+01:00, AsafMah @.***> wrote:

When running samples from https://github.com/bluwy/create-vite-extra

I get: Firefox can’t establish a connection to the server at ws://localhost:5173/.

Changing the ports and playing with the config doesn't help.

I'm on windows 11.

-- > Reply to this email directly or view it on GitHub:

https://github.com/denoland/deno/issues/15427#issuecomment-1445150866

You are receiving this because you commented.

Message ID: @.***> On Parabola running deno 1.30.3 it works as intended. I made a template with deno run -A npm:create-vite-extra --template deno-vue And hot module reloading and building worked fine in chromium

[CrafterSvK]

Vite cannot seem to recognize "npm:" directive in vue files. Internal server error: Failed to resolve import "npm:...@...

[fernandolguevara]

@sant123 same issue here...

@bartlomieju do u know if deno underlying http server implementation emits the upgrade event? vite is using this event for the HMR

[bartlomieju]

@sant123 same issue here...

@bartlomieju do u know if deno underlying http server implementation emits the upgrade event? vite is using this event for the HMR

Yes, it does, but the server implementation has several problems. Addressing https://github.com/denoland/deno/issues/18397 will give us a clear way forward to get rid of these problems.

[fernandolguevara]

@bartlomieju ... it doesn't on the #listenLoop its on the #serve... shouldn't be the same logic there?

https://github.com/denoland/deno/blob/d1a9c4cd7ce0c19ddf9c7c52c0d35d6124a7677d/ext/node/polyfills/http.ts#L763

[bartlomieju]

#listenLoop is actually dead code at this point and should be removed. We always use #serve these days.

[bartlomieju]

The WebSocket problem you were seeing, will be resolved by https://github.com/denoland/deno/pull/18511 and https://github.com/denoland/deno/pull/18552. I expect we will ship these fixes later this week in Deno v1.32.4.

[fernandolguevara]

🤙🏻

[varHarrie]

After upgrading to deno 1.32.4, when starting Vite and accessing the page, a blank page appears and the error message is as follows:

[bartlomieju]

@varHarrie do you use the default template or is it a more involved project? I tested before the release and made sure that these errors are gone. Can you also tell your OS?

[varHarrie]

@bartlomieju I use vite-extra to initialize project. Steps to reproduce:

yarn create vite-extra

# Project name: … vite-project
# Select a template: › deno-vue
# Select a variant: › TypeScript

cd vite-project

deno task dev

deno 1.32.4 (release, x86_64-apple-darwin)
v8 11.2.214.9
typescript 5.0.3

[bartlomieju]

Thanks for the report, I will look into it.

[fernandolguevara]

(base) ➜  x deno --version
deno 1.32.4 (release, aarch64-apple-darwin)
v8 11.2.214.9
typescript 5.0.3

(base) ➜  x deno task dev

  VITE v4.2.1  ready in 585 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
error: Uncaught BadResource: Bad resource ID
    at async Module.upgradeHttpRaw (ext:deno_http/01_http.js:478:15)
    at async go (ext:deno_node/http.ts:506:38)

[davidmorrill]

I have 5 systems I've been doing Deno development/testing on. After upgrading Deno to 1.32.4, two of the systems (one Mac OS, one Windows 11) suddenly started getting timeouts using WebSockets (which my app depends on heavily). My code has been working reliably for almost 2 years, through numerous Deno upgrades, without a hiccup. After downgrading back to 1.32.2 (the last version I had been using, since I skipped 1.32.3), both previously failing systems started working again.

I just ran into this problem today, so I haven't had any time to look at what's happening with the WebSocket code yet, but when I googled the problem, I immediately ran across this thread, so I thought I'd mention that there does seem to be some kind of a breaking change to WebSocket related code in 1.32.4. I plan on looking into my code as soon as I have time, but since I haven't changed any socket related code in over a year, I'm hoping that the issue can be addressed on the Deno side soon. I'll post any additional details as I find them. The symptom is just a timeout error on the browser side, and no other exceptions thrown on either side as far as I can tell.

[Peyman-Borhani]

  VITE v4.2.1  ready in 2142 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
error: Uncaught BadResource: Bad resource ID
    at eventLoopTick (ext:core/01_core.js:165:11)
    at async Module.upgradeHttpRaw (ext:deno_http/01_http.js:477:15)
    at async go (ext:deno_node/http.ts:521:38)

@bartlomieju Above issue in v1.32.5 using create-vite-extra + default deno-svelte template (Not Sveltekit) thanks.

[jordevorstenbosch]

  VITE v4.2.1  ready in 2142 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
error: Uncaught BadResource: Bad resource ID
    at eventLoopTick (ext:core/01_core.js:165:11)
    at async Module.upgradeHttpRaw (ext:deno_http/01_http.js:477:15)
    at async go (ext:deno_node/http.ts:521:38)

@bartlomieju Above issue in v1.32.5 using create-vite-extra + default deno-svelte template (Not Sveltekit) thanks.

Same issue when trying to use Vite+VanillaJS.

 VITE v4.3.1  ready in 215 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
error: Uncaught BadResource: Bad resource ID
    at eventLoopTick (ext:core/01_core.js:165:11)
    at async Module.upgradeHttpRaw (ext:deno_http/01_http.js:477:15)
    at async go (ext:deno_node/http.ts:521:38)

Error doesn't appear initially, but on first load via the browser it 'crashes'. However no errors appear until you stop the process in the terminal.

The errors in the browser in case that's useful:

[fernandolguevara]

@bartlomieju this means websockets are broken on deno, right?

[bartlomieju]

The WebSocket issue will be fixed before the next release. We completely switched the HTTP server implementation which will be more robust than the previous server. Sorry for inconvenience folks.

[bartlomieju]

The WebSocket issue will be fixed by https://github.com/denoland/deno/pull/18865 and will be included in Deno v1.33.

[Peyman-Borhani]

@bartlomieju I receive this error on Deno v.1.33.1 create-vite-extra + default deno-vanilla template (JavaScript)

[fernandolguevara]

@Peyman-Borhani It's working with deno 1.33.2 remove the deno.lock file and run the command with --reload flag

[fernandolguevara]

While I'm working with Vite, sometimes I randomly get this error message

============================================================
Deno has panicked. This is a bug in Deno. Please report this
at https://github.com/denoland/deno/issues/new.
If you can reliably reproduce this panic, include the
reproduction steps and re-run with the RUST_BACKTRACE=1 env
var set and include the backtrace in your report.

Platform: macos aarch64
Version: 1.33.2
Args: ["deno", "run", "-A", "--node-modules-dir", "npm:vite", "dev"]

thread 'main' panicked at 'Attemped to access invalid request 2 (0 in total available)', ext/http/http_next.rs:195:1
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

[bartlomieju]

@fernandolguevara could you provide any pointers how you triggered that panic?

CC @mmastrac please take a look

[mmastrac]

@fernandolguevara Would you mind running your project with RUST_BACKTRACE=1 deno run ... for a bit to help us find where that error is coming from?

[fernandolguevara]

@mmastrac @bartlomieju

============================================================
Deno has panicked. This is a bug in Deno. Please report this
at https://github.com/denoland/deno/issues/new.
If you can reliably reproduce this panic, include the
reproduction steps and re-run with the RUST_BACKTRACE=1 env
var set and include the backtrace in your report.

Platform: macos aarch64
Version: 1.33.2
Args: ["/Users/f00lg/.dvm/bin/deno", "run", "-A", "--node-modules-dir", "npm:vite", "dev"]

thread 'main' panicked at 'Attemped to access invalid request 1 (0 in total available)', ext/http/http_next.rs:195:1
stack backtrace:
   0:        0x104fc600c - <std::sys_common::backtrace::_print::DisplayBacktrace as core::fmt::Display>::fmt::h3c406a4521928e59
   1:        0x10470a4c0 - core::fmt::write::hc60df9bae744c40c
   2:        0x104f9b178 - std::io::Write::write_fmt::h1c4129dfc94f7c33
   3:        0x104fca760 - std::sys_common::backtrace::print::h34db077f1fa49c76
   4:        0x104fca3b4 - std::panicking::default_hook::{{closure}}::hff4fe3239c020cef
   5:        0x104fca080 - std::panicking::default_hook::hd2988fbcc86fdc46
   6:        0x10529a644 - deno::setup_panic_hook::{{closure}}::h3f9f36b0726e6206
   7:        0x104fcb06c - std::panicking::rust_panic_with_hook::h01730ad11d62092c
   8:        0x104fcae64 - std::panicking::begin_panic_handler::{{closure}}::h30f454e305d4a708
   9:        0x104fcadd4 - std::sys_common::backtrace::__rust_end_short_backtrace::hb7ff1894d55794a1
  10:        0x104fcadb0 - _rust_begin_unwind
  11:        0x104708618 - core::panicking::panic_fmt::hf1070b3fc33229fa
  12:        0x1049a9070 - deno_http::http_next::op_set_response_headers::v8_fn_ptr::hceef9c7cd6e3f422

[mmastrac]

@fernandolguevara thanks for the stack trace, that was very helpful. Working on the bug in #19154 - closing this issue for now in favour of #19058 that will track the follow-up.

[birkskyum]

When running deno run -A --node-modules-dir npm:vite , will vite be using Node in any way under the hood?

I noticed that Bun for now has a --bun flag specifically to make sure that Vite isn't using node under the hood, but I don't know what is the case for deno.

[bartlomieju]

When running deno run -A --node-modules-dir npm:vite , will vite be using Node in any way under the hood?

I noticed that Bun for now has a --bun flag specifically to make sure that Vite isn't using node under the hood, but I don't know what is the case for deno.

As far as I know Vite will run fully in Deno.

[CompeyDev]

Using the Astro CLI (when running starlight, in particular) seems to break under deno, since import.meta is undefined when trying to access import.meta.env here.

Is there something specific the starlight team needs to take into account? Or perhaps this might be a deno bug?