bartlomieju / vite-deno-example

Example of using Vite with Deno

Vite + Deno

This is an example repo of running Vite with Deno.

You can see live site at: https://vite-deno-example.deno.dev

This repo is based on a deno-vue template from create-vite-extra:

$ deno run -A npm:create-vite-extra --template deno-vue

Notes

• You need to use .mjs or .mts extension for the vite.config.[ext] file.

Papercuts

Currently there's a "papercut" for Deno users:

• peer dependencies need to be referenced in vite.config.js - in this example it is only vue package that needs to be referenced

Running

You need to have Deno v1.28 or later intalled to run this repo.

Start a dev server:

$ deno task dev

Deploy

Build production assets:

$ deno task build

This repository uses Deno Deploy and Git integration, where deployment is happening as part of the CI pipeline.

vite-deno-example's Issues

🐞 Server proxy config got error!

App with backend api proxy got error.

//  vite.config.mts

export default defineConfig(({ mode }) => ({
  server: {
    proxy: {
      '/api': {
        target: 'http://xxx.xxx.xxx.xxx:8000/api,
        changeOrigin: true,
      }
    }
  }
}))

Error:

TypeError: Invalid URL: 'http://xxx.xxx.xxx.xxx:8000/api/auth/whoami'
    at getSerialization (ext:deno_url/00_url.js:89:11)
    at new URL (ext:deno_url/00_url.js:359:27)
    at new Request (ext:deno_fetch/23_request.js:300:25)
    at ext:deno_fetch/26_fetch.js:418:27
    at new Promise (<anonymous>)
    at fetch (ext:deno_fetch/26_fetch.js:414:18)
    at ClientRequest._final (ext:deno_node/http.ts:163:29)
    at Object.runMicrotasks (ext:core/01_core.js:830:30)

Error `deno task dev` (and others) commands when try to use `vite-extra` with react

Task dev deno run -A --unstable --node-modules-dir npm:vite
error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getReport')
    at isMusl (file:///home/t/deno_forge/_hft3/deno_ui/node_modules/.deno/[email protected]/node_modules/rollup/dist/native.js:5:30)
    at getPackageBase (file:///home/t/deno_forge/_hft3/deno_ui/node_modules/.deno/[email protected]/node_modules/rollup/dist/native.js:53:28)
    at Object.<anonymous> (file:///home/t/deno_forge/_hft3/deno_ui/node_modules/.deno/[email protected]/node_modules/rollup/dist/native.js:28:21)
    at Object.<anonymous> (file:///home/t/deno_forge/_hft3/deno_ui/node_modules/.deno/[email protected]/node_modules/rollup/dist/native.js:81:4)
    at Module._compile (node:module:733:34)
    at Object.Module._extensions..js (node:module:747:10)
    at Module.load (node:module:658:32)
    at Function.Module._load (node:module:539:12)
    at Module.require (node:module:677:19)
    at require (node:module:791:16)

Is it possible to fix this or may be I made something wrong (however I only run deno run -A npm:create-vite-extra@lates)?
Thanks)

[BUG] HMR not working

I had the issue with the vue package throwing errors, and solved it with the imports in deno.json as per another issue, thank you!

Now I can't get HMR working.

The HMR shows output in VSCode terminal of being updated, but the content in the browser doesn't change.

Any kind tip would be appreciated.

Remove --node-modules-dir flag?

What would need to change about Vite/Deno to make this setup work without the --node-modules-dir flag?

---

Thanks for putting this together, btw. Super helpful! 👏

Relative import path "vue" not prefixed with / or ./ or ../

VSCode is showing error on import. The app is running fine BTW.

Fresh install.
Any help is welcome.