Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Vite #15427

Closed
brillout opened this issue Aug 8, 2022 · 101 comments · Fixed by #19154
Closed

Support Vite #15427

brillout opened this issue Aug 8, 2022 · 101 comments · Fixed by #19154
Assignees
Labels
feat new feature (which has been agreed to/accepted) node compat

Comments

@brillout
Copy link

brillout commented Aug 8, 2022

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: oven-sh/bun#250 (comment).

@AnInternetTroll
Copy link
Contributor

Check out #12577

@bartlomieju
Copy link
Member

Yes, it's a personal goal of mine to support Vite. In fact you can already run Vite in Deno, although the invocation is somewhat long:

deno run -A --compat --unstable ./node_modules/.bin/vite build

There's a caveat though - HMR is still not supported (ie. vite dev subcommand won't refresh stuff in the browser), due to a single missing API (denoland/std#2457) that I hope to be fixed by the time Deno v1.25 is released. Besides that I was able to successfully build different projects using Vue or Svelte(Kit) with Vite.

We also hope to further improve experience and current proposal that is in the works will allow to invoke it as:

deno run -A npm:vite dev

@LukaHarambasic
Copy link

Heyho,
Could some one explain me why Vite needs a special treatment? I'm aware what Vite has done and is going to do for the JS eco system / developer system. But why has a JS runtime to be adapted for a library? Is it a bug/ missing feature in Deno or is Vite a special snow flake?
Thanks

@Soremwar
Copy link
Contributor

Soremwar commented Aug 8, 2022

@LukaHarambasic I don't see how any special treatment has been given to Vite. Deno has a compatibility layer with Node that enables the use of non packages with Deno, nothing additional to improving that layer has been done in order to support Vite

@josh-hemphill
Copy link
Contributor

Vite just uses some of the still missing APIs from the node compat module, most of it isn't a change to the runtime.
Though I'm curious how esbuild (which Vite depends on) is going to be handled, because by default Vite loads binaries for it, and still says in the docs that using webassembly version of esbuild is much slower.

@kidonng
Copy link
Contributor

kidonng commented Aug 9, 2022

@josh-hemphill If we are talking about Node compat, the esbuild binary is already downloaded into node_modules by the package manager, when Vite child_process.spawns esbuild, the compat library will translate it to Deno.spawnChild. WASM version of esbuild is only added recently and for different use cases (e.g. on Deno Deploy).

@bartlomieju
Copy link
Member

Inching closer on Vite support, finally able to use HMR:

Screen.Recording.2022-08-10.at.08.21.16.mov

@littledivy littledivy added feat new feature (which has been agreed to/accepted) node compat labels Aug 10, 2022
@bartlomieju
Copy link
Member

We've landed all necessary APIs to support Vite and we are able to run various Vite commands with success.

There are a few missing pieces to make the experience top notch and we'll address them in the next weeks.

For those who want to try it out for themselves, here's what you need to do (using Vue template):

  1. Make sure you have Deno v1.25 installed
  2. npm create vite@latest my-vue-app -- --template vue
  3. cd my-vue-app
  4. npm install <--- (this step will not be necessary in the future, right now we can't teach rollup to use Deno's NPM cache, but we'll address it by having symlinked node_modules/ directory)
  5. Change vite.config.js with following contents:
import { defineConfig } from 'npm:vite'
import vue from 'npm:@vitejs/plugin-vue'
import "npm:vue@3.2.37/compiler-sfc" // <--- this step won't be needed in the future either

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})
  1. deno run -A --unstable npm:vite

Feedback much appreciated!

@pillowsoft
Copy link

FYI, I tried your recommendation above and it seemed to work well for Vue. I then tried the same with svelte. Alas, that did not seem to work (it never resolved the localhost endpoint). No errors in the terminal. Here's the repro repo:

https://github.com/pillowsoft/my-svelte-deno-app

Just wanted to give you feedback as requested.

Looking forward to npm free vite builds!!!!

Screen Shot 2022-08-25 at 10 02 17 AM

Screen Shot 2022-08-25 at 10 02 35 AM

I think I did things correctly and there are no errors when running. I can dig into it more if you like.

I'm also guessing there will be a new build of the vscode extension to handle the "npm:****" resolution errors?

P.S. brew install deno did not seem to give me 1.2.5, so I had to use the install.sh way

@bartlomieju
Copy link
Member

FYI, I tried your recommendation above and it seemed to work well for Vue. I then tried the same with svelte. Alas, that did not seem to work (it never resolved the localhost endpoint). No errors in the terminal. Here's the repro repo:

https://github.com/pillowsoft/my-svelte-deno-app

Just wanted to give you feedback as requested.

I think I did things correctly and there are no errors when running. I can dig into it more if you like.

Thanks, much appreciated. I'll try to debug that later tonight.

I'm also guessing there will be a new build of the vscode extension to handle the "npm:****" resolution errors?

Yes, we're working on adding support for npm specifiers in the LSP

P.S. brew install deno did not seem to give me 1.2.5, so I had to use the install.sh way

I think the brew build might not be available yet.

@karelklima
Copy link

Feedback for Deno v1.25 - seems like Vite dev mode does not run on Windows yet.

I followed the steps in the previous comment, but the Vite dev server does not start. There is the following error message in console:

TypeError: Windows only supports ctrl-c (SIGINT) and ctrl-break (SIGBREAK).
    at bindSignal (deno:runtime/js/40_signals.js:14:16)
    at Object.addSignalListener (deno:runtime/js/40_signals.js:54:21)
    at Module.addSignalListener (https://deno.land/std@0.153.0/_deno_unstable.ts:34:17)
    at process.on (https://deno.land/std@0.153.0/node/process.ts:387:22)
    at process.once (https://deno.land/std@0.153.0/node/_events.mjs:525:8)
    at createServer (file:///***/deno/npm/registry.npmjs.org/vite/3.0.9/dist/node/chunks/dep-0fc8e132.js:59295:17)

The root cause is this line of code:

process.once('SIGTERM', exitProcess);

Which seems to come from here: https://github.com/vitejs/vite/blob/757a92f1c7c4fa961ed963edd245df77382dfde6/packages/vite/src/node/server/index.ts#L446

After removing the line manually the dev server seems to be running, although the app is stuck on loading state and there is only a blank screen in the browser.

Some good news though - vite build seems to work!

@bartlomieju
Copy link
Member

FYI, I tried your recommendation above and it seemed to work well for Vue. I then tried the same with svelte. Alas, that did not seem to work (it never resolved the localhost endpoint). No errors in the terminal. Here's the repro repo:

Took a stab at it and I believe the problem is with "no dependencies found by scanner", however I'm not able to pinpoint the problem right now. I will resume debugging and fixes after the weekend.

@CyberAP
Copy link

CyberAP commented Aug 26, 2022

I might be doing something completely wrong but I wasn't able to run it. That's an error I am getting (both for 3.x and 2.x Vite versions):

stas@Stanislavs-MacBook-Pro gitlab % deno run -A --unstable npm:vite build      
error: Uncaught TypeError: Promise.All is not a function
          Promise.All(
                  ^
    at https://deno.land/std@0.153.0/node/internal/streams/writable.mjs:937:19

I wonder if I am missing something here?

@cjihrig
Copy link
Contributor

cjihrig commented Aug 26, 2022

@CyberAP that typo was fixed a few hours ago in denoland/std#2569. On the next release it should be resolved.

@brc-dd
Copy link

brc-dd commented Aug 26, 2022

I'm trying to fix compatibility between VitePress and deno, currently I'm getting this error:

Error: [ERR_PACKAGE_PATH_NOT_EXPORTED] Package subpath './dist/vue.runtime.esm-bundler.js' is not defined by "exports" in /home/osboxes/.cache/deno/npm/registry.npmjs.org/vue/3.2.37/package.json imported from /home/osboxes/.cache/deno/npm/registry.npmjs.org/vitepress/1.0.0-alpha.12/dist/node/serve-0ffe109f.js

But, vue's package.json already has this wildcard export: "./dist/*": "./dist/*", I guess deno is not considering such exports?

@bartlomieju
Copy link
Member

I'm trying to fix compatibility between VitePress and deno, currently I'm getting this error:

Error: [ERR_PACKAGE_PATH_NOT_EXPORTED] Package subpath './dist/vue.runtime.esm-bundler.js' is not defined by "exports" in /home/osboxes/.cache/deno/npm/registry.npmjs.org/vue/3.2.37/package.json imported from /home/osboxes/.cache/deno/npm/registry.npmjs.org/vitepress/1.0.0-alpha.12/dist/node/serve-0ffe109f.js

But, vue's package.json already has this wildcard export: "./dist/*": "./dist/*", I guess deno is not considering such exports?

Yes, covered in #15605, expect a fix next week in v1.25.1

@bartlomieju
Copy link
Member

I'm trying to fix compatibility between VitePress and deno, currently I'm getting this error:

Error: [ERR_PACKAGE_PATH_NOT_EXPORTED] Package subpath './dist/vue.runtime.esm-bundler.js' is not defined by "exports" in /home/osboxes/.cache/deno/npm/registry.npmjs.org/vue/3.2.37/package.json imported from /home/osboxes/.cache/deno/npm/registry.npmjs.org/vitepress/1.0.0-alpha.12/dist/node/serve-0ffe109f.js

But, vue's package.json already has this wildcard export: "./dist/*": "./dist/*", I guess deno is not considering such exports?

@brc-dd would you opening a separate issue for this problem with a reproduction? I would love to include it as a test

@brc-dd
Copy link

brc-dd commented Aug 28, 2022

@bartlomieju Add this in vite.config.js (rest of the steps were same as in your comment):

import { defineConfig } from 'npm:vite'
import vue from 'npm:@vitejs/plugin-vue'
import 'npm:vue@3.2.37/compiler-sfc'

import { createRequire } from 'https://deno.land/std@0.153.0/node/module.ts'

const require = createRequire(import.meta.url)
const vueRuntimePath = 'vue/dist/vue.runtime.esm-bundler.js'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: /^vue$/,
        replacement: require.resolve(vueRuntimePath)
      }
    ]
  }
})

@mzaien
Copy link

mzaien commented Aug 31, 2022

import "npm:vue@3.2.37/compiler-sfc"

Also true for react/preact, but to be clear I do not recall them having a compiler package, So I've tried adding react, and react dom

import "npm:react@18.2.0"
import "npm:react-dom@18.2.0"

@ejsmith
Copy link

ejsmith commented Sep 2, 2022

@bartlomieju can you explain what the benefit of running Vite on deno is? Does Vite end up using the same resolution methods as Deno? Can we use VS code to edit both the front and backend code both with the deno language service and have everything work the same?

@bartlomieju
Copy link
Member

@bartlomieju can you explain what the benefit of running Vite on deno is?

I'm not sure there's any particular benefit for using Deno over Node to run Vite. It is a quite complex project, which was a great testing ground for our Node compatibility which helped us uncover many bugs. But for Deno users being able to run Vite opens a whole frontend ecosystem and makes it more accessible.

Does Vite end up using the same resolution methods as Deno?

Currently not, but now that you can run Vite in Deno I see no reason why it wouldn't do so in the future.

Can we use VS code to edit both the front and backend code both with the deno language service and have everything work the same?

Yes, although Deno's LSP is still missing support for npm: specifiers that we intend to fix in the coming weeks.

@bartlomieju
Copy link
Member

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.

@DefinitelyMaybe
Copy link

Hey @bartlomieju

Great work so far! Have been watching this closely. I cloned the example repo and ran deno task dev but errored with:

PS C:\Users\rekke\Documents\vite-deno-example> deno task dev
Warning deno task is unstable and may drastically change in the future
Task dev deno run -A --unstable --node-modules-dir npm:vite
error: A required privilege is not held by the client. (os error 1314), symlink 'C:\Users\rekke\Documents\vite-deno-example\node_modules\.deno\esbuild-freebsd-arm64@0.15.8\node_modules\esbuild-freebsd-arm64' -> 'C:\Users\rekke\Documents\vite-deno-example\node_modules\.deno\esbuild@0.15.8\node_modules\esbuild-freebsd-arm64'

Was that a me thing or an almost there thing?

@cjihrig
Copy link
Contributor

cjihrig commented Sep 22, 2022

I believe your user account needs additional privileges at the operating system level to create symlinks on Windows.

@DefinitelyMaybe
Copy link

Ah, perfect. thank you will look into it.

@fernandolguevara
Copy link

🤙🏻

@varHarrie
Copy link

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:
image

@bartlomieju
Copy link
Member

@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
Copy link

@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
Copy link
Member

Thanks for the report, I will look into it.

@fernandolguevara
Copy link

fernandolguevara commented Apr 13, 2023

(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
Copy link

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
Copy link

Peyman-Borhani commented Apr 21, 2023

  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
Copy link

  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:
Screenshot 2023-04-25 at 10 20 45

@fernandolguevara
Copy link

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

@bartlomieju
Copy link
Member

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
Copy link
Member

The WebSocket issue will be fixed by #18865 and will be included in Deno v1.33.

@Peyman-Borhani
Copy link

Peyman-Borhani commented May 1, 2023

err

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

@fernandolguevara
Copy link

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

@fernandolguevara
Copy link

fernandolguevara commented May 5, 2023

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
Copy link
Member

bartlomieju commented May 7, 2023

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

CC @mmastrac please take a look

@mmastrac mmastrac self-assigned this May 8, 2023
@mmastrac
Copy link
Contributor

mmastrac commented May 8, 2023

@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
Copy link

fernandolguevara commented May 8, 2023

@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
Copy link
Contributor

@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.

mmastrac added a commit that referenced this issue May 16, 2023
Fixes for various `Attemped to access invalid request` bugs (#19058,
#15427, #17213).

We did not wait for both a drop event and a completion event before
removing items from the slab table. This ensures that we do so.

In addition, the slab methods are refactored out into `slab.rs` for
maintainability.
levex pushed a commit that referenced this issue May 18, 2023
Fixes for various `Attemped to access invalid request` bugs (#19058,
#15427, #17213).

We did not wait for both a drop event and a completion event before
removing items from the slab table. This ensures that we do so.

In addition, the slab methods are refactored out into `slab.rs` for
maintainability.
@birkskyum
Copy link
Contributor

birkskyum commented Aug 30, 2023

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
Copy link
Member

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
Copy link

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?

@Ciantic
Copy link

Ciantic commented Oct 22, 2024

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.

I don't think it always does, I'm getting import errors, same as with bun (without --bun flag)

Like this:

[vite] Error when evaluating SSR module C:/Source/JavaScript/solid-start-test/deno-solid-test/src/routes/index.tsx?pick=default&pick=$css: failed to import "jsr:@db/sqlite@0.12"

Indicating that it is not using deno, because deno knows how to import from jsr.

Update It might be that vinxi, that is now popular way to run vite's dev server doesn't support deno 😢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat new feature (which has been agreed to/accepted) node compat
Projects
None yet
Development

Successfully merging a pull request may close this issue.