vitejs/vite

Next generation frontend tooling. It's fast!

Vite ⚡

Next Generation Frontend Tooling

• 💡 Instant Server Start
• ⚡️ Lightning Fast HMR
• 🛠️ Rich Features
• 📦 Optimized Build
• 🔩 Universal Plugin Interface
• 🔑 Fully Typed APIs

Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tooling that significantly improves the frontend development experience. It consists of two major parts:

• A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).

• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

Read the Docs to Learn More.

Packages

Package	Version (click for changelogs)
vite
@vitejs/plugin-legacy
create-vite

Contribution

See Contributing Guide.

License

MIT.

Sponsors

vite's Issues

Hot update does not take effect

window 10 Google Chrome 81的浏览器更新没有 生效

import vuex, vue-router leads to module load failure on windows

Reference to #23

Importing vue-router and vuex

import { createRouter, createWebHistory } from 'vue-router'
import { createStore } from 'vuex'

Leading to errors

OS: Windows 10 Pro
Browser: Chrome 81
Node: 12.16

  "dependencies": {
    "axios": "^0.19.2",
    "vue": "^3.0.0-beta.9",
    "vue-router": "^4.0.0-alpha.10",
    "vuex": "^4.0.0-beta.1"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.0-beta.9",
    "snowpack": "^1.7.1",
    "vite": "^0.10.2"
  },

Testing Support

Is Testing Supported In vite If Supported How To Use vue-uest-utils-next with vite

Community and Nuxt supporting

Would like a Discord/Slack community about vueVite to try building nuxt vue/vite project with everyone and share experiences.

Here is a link: https://discord.gg/RgTRAC @coreteam contact me to obtain Admin status

v-model is invalid in vue@next with vite

In a project created with vite, I define a component with model such as:

<template>
  <input
    type="checkbox"
    v-bind:checked="checked"
    v-on:change="$emit('change', $event.target.checked)"
  />
</template>
<script>
export default {
  name: "BaseCheckbox"
  model: {
    prop: "checked",
    event: "change",
  },
  props: {
    checked: Boolean,
  },
};
</script>

and then I use v-model to bind checked for BaseCheckbox

<template>
  <BaseCheckbox v-model="checked" />
</template>

<script>
export default {
  data: () => ({checked: true})
}
</script>

It didn't work, and the value of checked props was false in BaseCheckbox.But v-model with native dom was running normal.
Is this problem about vite, vue@next or compiler?

Import .ts files in index.html

Describe the bug

Vite is still serving .ts files if they are imported in the index.html <script> tag. It results in not loadable page.

index.html

<script type="module">
    import { createApp } from 'vue'
    import App from './src/App.vue'
    import { router } from './src/router/index.ts'
    import { store } from './src/store/index.ts'

    const app = createApp(App)
    app.use(store)
    app.use(router)
    app.mount('#app')
  </script>

Chrome console error

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

System Info

• vite version: 0.11.1
• Operating System: Ubuntu 19.10
• Node version: v10.19.0
• Optional:
  • yarn version 1.22.4
  • Installed vue version (from yarn.lock or package-lock.json) 3.0.0-beta.9
  • Installed @vue/compiler-sfc version 3.0.0-beta.9

Plugin ecosystem / discoverability

As discussed in #34, plugins could be named vite-plugin-xxx.

I published vite-plugin-proxy, because it's something I missed from webpack-dev-server.

Maybe it's useful to mention this in readme so users can discover / find such plugins. Would you take a PR that adds this into vite's README?

libraries that import relative path in node_modules

Curious how to import modules that have relative paths to was trying to import a node_module package:
e.g.
https://unpkg.com/browse/[email protected]/esm/index.js

[vite] Error while resolving node_modules with id "lib/cache.js":
{ Error: Cannot find module 'lib/package.json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
    at resolveFileName (/Users/darrenjennings/source/repos/vite-sup/node_modules/resolve-from/index.js:29:39)
    at resolveFrom (/Users/darrenjennings/source/repos/vite-sup/node_modules/resolve-from/index.js:43:9)
    at Object.module.exports [as default] (/Users/darrenjennings/source/repos/vite-sup/node_modules/resolve-from/index.js:46:47)
    at app.use (/Users/darrenjennings/source/repos/vite-sup/node_modules/vite/dist/serverPluginModules.js:143:51) code: 'MODULE_NOT_FOUND' }
[vite] Error while resolving node_modules with id "use-swrv":
{ Error: Cannot find module 'use-swrv/package.json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
    at resolveFileName (/Users/darrenjennings/source/repos/vite-sup/node_modules/resolve-from/index.js:29:39)
    at resolveFrom (/Users/darrenjennings/source/repos/vite-sup/node_modules/resolve-from/index.js:43:9)
    at Object.module.exports [as default] (/Users/darrenjennings/source/repos/vite-sup/node_modules/resolve-from/index.js:46:47)
    at app.use (/Users/darrenjennings/source/repos/vite-sup/node_modules/vite/dist/serverPluginModules.js:143:51) code: 'MODULE_NOT_FOUND' }```

HMR only updates the template

HMR only updates the template when both the template and style code are modified

I think this line causes the error. src/node/serverPluginHmr.ts:208
https://github.com/vuejs/vite/blob/de131ac6bbda2345a6e6a6f4efbb4f97f6d77123/src/node/serverPluginHmr.ts#L202-L209

Windows Path Issue When Serving

Description

• Error When Serving App With Typescript, Vuex and Router

• It Is A Windows Path Issue

• It's Not Only A .ts And .vue Problem This Issue Is Same For .js Also

• index.html

<div id="app"></div>
<script type="module">
  import { createApp } from "vue";
  import App from "./App.vue";
  import router from "./router/index.ts";
  import store from "./store/index.ts";

  createApp(App).use(router).use(store).mount("#app");
</script>

• Error In Chrome Console
  

• When Clicked (index):1
  

System Info

• vite version: 0.11.3

• Operating System: Windows

• Node version: 14.2.0

npx example not working : module not found

First : Congratulations on thinking about it, coding it and sharing it ! 🎉

I have tried to run npx vite with the example. The server starts, but does not display the page. The devtool shows a 404 on localhost:3000/__modules/vue. Please find the stack trace below.

My config :

Debian GNU/Linux 10 (buster)
❯ node --version
v12.14.1
❯ npm --version
6.14.4

❯ npx vite
npx : 70 installé(s) en 5.322s
Running at http://localhost:3000
Error: Cannot find module 'vue/package.json'
Require stack:
- /home/fkerisit/tmp/vite-test/noop.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at resolveFileName (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/resolve-from/index.js:29:39)
    at resolveFrom (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/resolve-from/index.js:43:9)
    at Object.module.exports [as default] (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/resolve-from/index.js:46:47)
    at Object.resolveModule (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/dist/server/moduleResolver.js:25:44)
    at Server.<anonymous> (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/dist/server/server.js:25:37)
    at Server.emit (events.js:223:5)
    at parserOnIncoming (_http_server.js:748:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:115:17) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/fkerisit/tmp/vite-test/noop.js' ]
}
(node:7688) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token, expected "," (4:0)
    at Parser._raise (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:742:17)
    at Parser.raiseWithData (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:735:17)
    at Parser.raise (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:729:17)
    at Parser.unexpected (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:8757:16)
    at Parser.expect (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:8743:28)
    at Parser.parseObj (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:10365:14)
    at Parser.parseExprAtom (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9995:28)
    at Parser.parseExprSubscripts (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9602:23)
    at Parser.parseMaybeUnary (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9582:21)
    at Parser.parseExprOps (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9452:23)
    at Parser.parseMaybeConditional (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9425:23)
    at Parser.parseMaybeAssign (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:9380:21)
    at Parser.parseExportDefaultExpression (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:12283:24)
    at Parser.parseExport (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:12185:31)
    at Parser.parseStatementContent (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:11185:27)
    at Parser.parseStatement (/home/fkerisit/.npm/_npx/7688/lib/node_modules/vite/node_modules/@babel/parser/lib/index.js:11081:17)
(node:7688) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:7688) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

External composable libraries reactivity broken

Describe the bug

Composable libraries that rely on @vue/runtime-core have their reactivity system broken.

For example vue-composable uses @vue/runtime-core as peerDependency.

When used with vite, because of vite uses the runtime.esm-browser it will include all the reactivity system in one file, making the third-party libraries that rely on runtime-core broken.

System Info

• required vite version: 0.11.1
• required Operating System: Windows 10
• required Node version: 14.1
• Optional:
  • yarn version: 1.22.4
  • Installed vue version: beta.9
  • Installed @vue/compiler-sfc version: beta.9

Reproduction

Install vite and use this component as App.vue

Fixes

This can be fixed by changing the import on the third-party to vue instead of runtime-core.
Ideally I would expect the runtime-core to be a proxy of vue

TS support on Windows

Fresh install with npx create-vite-app

<script lang="ts">
export default {
  data: () => ({ count: 0 })
}
</script>

[vite] error while transforming /App.vue with esbuild:
Error: Transform failed with 1 error
    at failureErrorWithLog (C:\Users\adrst\AppData\Roaming\npm-cache\_npx\5296\node_modules\vite\node_modules\esbuild\lib\main.js:35:17)
    at Object.transform (C:\Users\adrst\AppData\Roaming\npm-cache\_npx\5296\node_modules\vite\node_modules\esbuild\lib\main.js:250:38)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Object.exports.transformWithService (C:\Users\adrst\AppData\Roaming\npm-cache\_npx\5296\node_modules\vite\dist\esbuildService.js:34:24)
    at async compileSFCMain (C:\Users\adrst\AppData\Roaming\npm-cache\_npx\5296\node_modules\vite\dist\serverPluginVue.js:110:24)
    at async C:\Users\adrst\AppData\Roaming\npm-cache\_npx\5296\node_modules\vite\dist\serverPluginVue.js:41:24
    at async C:\Users\adrst\AppData\Roaming\npm-cache\_npx\5296\node_modules\vite\dist\serverPluginModuleRewrite.js:39:9 {
  errors: [
    { text: 'Could not read from file: C:\\input.ts', location: null }
  ],
  warnings: []
}

Getting the above error on a Windows machine, it does work on my mac.
I'm guessing related to path issues from #58 ?

TS support fails with incorrect browser import

For example, when you import a TS file into App.vue and access an exported member...

// App.vue
<script lang="ts">
import { count } from "./foo"

export default {
  data: () => ({ count })
}
</script>

... you get an Failed to load module script error:

vite/esbuild creates a foo resource without the .js/.ts extension. The JS file is also not accessible if you call it directly like http://localhost:3000/<path/to/foo.js>?t=<hash>.

`vite build` errors on brand new vite app

This is probably a user error since I've never used rollup before. On a brand new vite app created with create-vite-app vvv I am able to run the app with npx vite and browse to localhost just fine. Running npx vite build however throws an error:

~/Src/vvv$ npx vite build
vite v0.10.3
Building for production...
[vite] Build errored out.
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:161:30)
    at Module.error (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:14994:16)
    at tryParse (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:14884:23)
    at Module.setSource (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:15303:30)
    at C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:17338:20
    at async C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:17187:28
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async getCombinedPromise (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:17259:13)
    at async ModuleLoader.awaitLoadModulesPromise (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:17264:9) {
  code: 'PARSE_ERROR',
  parserError: SyntaxError: Unexpected token (1:0)
      at Object.pp$4.raise (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:3399:13)
      at Object.pp.unexpected (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:1248:8)
      at Object.pp$3.parseExprAtom (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:2822:10)
      at Object.parseExprAtom (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:5836:77)
      at Object.pp$3.parseExprSubscripts (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:2651:19)
      at Object.pp$3.parseMaybeUnary (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:2628:17)
      at Object.parseMaybeUnary (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:5720:29)
      at Object.pp$3.parseExprOps (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:2572:19)
      at Object.pp$3.parseMaybeConditional (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:2555:19)
      at Object.pp$3.parseMaybeAssign (C:\Src\vvv\node_modules\rollup\dist\shared\rollup.js:2528:19) {
    pos: 0,
    loc: Position { line: 1, column: 0 },
    raisedAt: 1
  },
  pos: 0,
  loc: { column: 0, file: 'C:\\Src\\vvv\\index.html', line: 1 },
  frame: '1: <div id="app"></div>\n' +
    '   ^\n' +
    '2: <script type="module">\n' +
    "3: import { createApp } from 'vue'",
  watchFiles: [ 'C:\\Src\\vvv\\index.html' ]
}

I do see the Note that you need plugins to import files that are not JavaScript warning, and the error seems to suggest that it's trying to parse index.html line 1 column 0.

What sort of things do I have to do to make this work? Should vite build be trying to rollup index.html? Do I need to install the @rollup/plugin-html package?

Environment:
uname: CYGWIN_NT-10.0-WOW
npm: 6.14.5
node: v12.16.3
rollup versions in package-json.lock:

• @rollup/plugin-alias: 3.1.0
• @rollup/plugin-json: 4.0.3
• @rollup/plugin-node-resolve: 7.1.3
• @rollup/plugin-replace: 2.3.2
• @rollup/pluginutils: 3.0.10
• rollup: 2.7.6
• rollup-plugin-terser: 5.3.0
• rollup-plugin-vue: 6.0.0-alpha.8
• rollup-pluginutils: 2.8.2

Add How To Use Source map In README.md

With New Release --sourcemap Is Supported To Create Source Map When Building Application. Add This Information To README.md

[Question] Support beyond Vue?

I played around with vite and it's looking good!

Are there any plans on supporting other frameworks in the future such as Svelte (or at least allowing a way to support them through plugins) or is this project strictly for Vue?

path error during build

I'm using font face like that:

@font-face {
  font-family: "myfont";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.woff") format("woff");
}

It is work as expected on dev. But production build fails.

[Error: ENOENT: no such file or directory, open 'C:\fonts\myfont.woff2'] {
errno: -4058,
code: 'PLUGIN_ERROR',
syscall: 'open',
path: 'C:\fonts\myfont.woff2',
pluginCode: 'ENOENT',
plugin: 'vite:css',
hook: 'transform',
id: 'C:\Users\sib\Desktop\dev\vitetailwind\tailwind.css',
watchFiles: [
'C:\Users\sib\Desktop\dev\vitetailwind\index.html',
'C:\Users\sib\Desktop\dev\vitetailwind\node_modules\vue\dist\vue.runtime.esm-bundler.js',
'C:\Users\sib\Desktop\dev\vitetailwind\App.vue',
'C:\Users\sib\Desktop\dev\vitetailwind\App.vue?vue&type=script&lang.js',
'C:\Users\sib\Desktop\dev\vitetailwind\App.vue?vue&type=template&id=add54c12',
'C:\Users\sib\Desktop\dev\vitetailwind\App.vue?vue&type=style&index=0&lang=postcss.css',
'C:\Users\sib\Desktop\dev\vitetailwind\tailwind.css'
]

Loading failed for the module with source

Describe the bug

After installing a brand new vite app I get this error in console and the app doesn't load.

Loading failed for the module with source “http://localhost:3000/@modules/vue”.

Steps to reproduce

$ npx create-vite-app my-vite
$ cd my-vite
$ npm install
$ npm run dev

System Info

• required vite version: 0.0.0 dev
• required Operating System: Windows 7
• required Node version: 12.10.0

Question regarding koa

I wrote a koa plugin (thanks for the Dev server API), that handles proxy-ing similar to webpack-dev-server.

Is koa here to stay or is it still experimental? I'm asking before I "advertise" the plugin.

Sub-question / suggestion: it might be nice if upcoming Config file would support specifying custom plugins. This way, less custom code will be needed.

Allow typescript

main.ts and lang="ts" in vue components?

Build errored out

npx create-vite-app <my-app>

when run build errored out:

{ [Error: ENOENT: no such file or directory, rmdir 'xxx/dist']
  errno: -2,
  code: 'ENOENT',
  syscall: 'rmdir',
  path: 'xxx/dist' }

need to manually create dist folder，maybe it needs to be automatic.

Environment Info:
Node: v10.19.0
npm: 6.13.4
npmPackages:"vite": "^0.5.1"

Problem importing vue-router & vuex from v0.6.0 onward

The Error

Error on command line console:

[vite] Error while resolving node_modules with id "%5C@modules%5Cvue-router%5Cdist%5Cvue-router.esm-bundler.js":
{ Error: Cannot find module '%5C@modules%5Cvue-router%5Cdist%5Cvue-router.esm-bundler.js'

How to create the problem

1. follow steps as per normal to create vite project using npx
2. install vite 0.6.0 (from 0.5.1)
3. install [email protected]
4. add follwing to index.html file

import { createRouter, createWebHistory } from 'vue-router'

4. npm run dev and problem will appear when you navigate to the page

compare vue serve with vite

rt

After Build Error When Serving index.html ( Windows )

Describe the bug

After Building App I Tried To Serve index.html But It Fail Due To Windows Path Problem.

index.html

<link rel="stylesheet" href="/assets/style.css">
<div id="app"></div>


<script type="module" src="/assets/index.js"></script>

I Tried To Fix It. Both Of This Are Solution Of This Bug.

<link rel="stylesheet" href="assets/style.css">
<div id="app"></div>


<script type="module" src="assets/index.js"></script>
----------------------------------------------------------------------------------------
<link rel="stylesheet" href="./assets/style.css">
<div id="app"></div>


<script type="module" src="./assets/index.js"></script>

I Added A PR(#63) To Fix This But It Was Rejected

System Info

• vite version: 0.11.3
• Operating System: Windows 10
• Node version: 14.2

Won't compile with img path starting with ./

This won't stat (compile module) vite:

<img alt="Vue logo" src="./assets/logo.png" />

These will start even if logo is not found:

<img alt="Vue logo" src="assets/logo.png" />
<img alt="Vue logo" src="/assets/logo.png" />

I can't get any combination to work with both vite and vue-cli-service with vue 3.

DevTools

any chance to bind the app to DevTools?
my chrome says

DevTools failed to load SourceMap: Could not load content for chrome-extension://xxxxxxxxxxxxxxxxxx/sourcemaps/onloadwff.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Automatic `cd` and `npm i`

Would it be fine for the create script to change directories and install dependencies automatically as vue-cli does?

Cannot compile SFC file in another package

When importing the SFC file in another package from the vite application, the following error is output.

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Also, during vite build, an error is output that rollup cannot parse the SFC file.
The following is when running it in my local environment.

$ vite build
vite v0.10.2
Building for production...
[vite] Build errored out.
{ Error: Could not load /Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=script&lang=ts (imported by /Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue): /Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue is not parsed it yet
    at getDescriptor (/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/rollup-plugin-vue/dist/index.js:202:11)
    at Object.load (/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/rollup-plugin-vue/dist/index.js:49:36)
    at Promise.resolve.then (/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/rollup/dist/shared/rollup.js:18100:25)
  code: 'PLUGIN_ERROR',
  plugin: 'vue',
  hook: 'load',
  watchFiles:
   [ '/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/index.html',
     '/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/vue/dist/vue.runtime.esm-bundler.js',
     '/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/App.vue',
     '/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/App.vue?vue&type=script&lang=ts',
     '/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/App.vue?vue&type=template&id=d36c9542',
     '/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
     '/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue',
     '/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=script&lang=ts',
     '/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=template&id=43a490e4' ] }

Work repository
https://github.com/ushironoko/vite-playground

The repository consists of mono repos, and another packages can be found in packages / vite-components.

This worked fine when I placed the SFC file in the same workspace. Do you know the cause?

Thank you.

Import module mapping / custom path resolution

Taking inspiration from the following:

• Typescript path mapping
• Webpack's resolve.alias

...would be nice to have a custom path mapping, just to have a sexier import paths, ex:

// example.ts
import { Store, GlobalModule, AppModule } from "@app-utils/store-manager";
import { ICenter } from "@app-rest/centers";
import { ICompany } from "@app-rest/companies";
import MyModal from "@app-components/my-modal/my-modal.vue";

...instead of relative paths like:

import { Store, GlobalModule, AppModule } from "../../store-manager";
import { ICenter } from "../../../centers";
...

Currently on Vue CLI 3 (Webpack), to achieve this feature, i'm using tsconfig-paths-webpack-plugin ...but for a non-typescript related builder like vite i suggest to go for a config file (and maybe an API to extend this behaviour?).

vue beta.7 may be causing problems with vue-router and vuex

This is not directly related to vite, but may be of interest for those who are using vuex, vue-router.

You can see a link to sample project that will cause this error here...

https://github.com/ais-one/vite-eg/tree/master/test

just do

npm i
npm run dev

and navigate to app on browser, you can see the error.

If change vue and sfc compiler to beta.4, the error will go away

If you comment out , it will also not show the error, but you will not have any routing

The package information is below

  "dependencies": {
    "vue": "^3.0.0-beta.7",
    "vue-router": "^4.0.0-alpha.9",
    "vuex": "^4.0.0-beta.1"
  },
  "devDependencies": {
    "vite": "^0.10.0",
    "@vue/compiler-sfc": "^3.0.0-beta.7"
  }

HMR when using imported sass files

Is it possible to trigger HMR when importing variables from a .scss file?

// vars.scsss
$myVar: blue;

// component file
<template>
  <div>
    <h1>{{ text }}</h1>
    <button>I'm a button</button>
  </div>
</template>

<script></script>

<style scoped lang="scss">
@import "./vars.scss";

div {
  h1 {
    // Imported from @import "./vars.scss";
    color: $myVar;
  }

  button {
    color: red;
  }
}
</style>

It would be amazing to see the HMR work when the variable from .vars.scss changes. Is that possible?

Use with Buefy

Describe the bug

Trying to do a simple example showing a Buefy button. But got error.

This issue maybe is for Buefy to fix, I am not sure, but I put it here for awareness.

System Info

• required vite version: 0.12.0
• required Operating System: Windows 10
• required Node version: 12.16
• Optional:
  • npm/yarn version
  • Installed vue version (from yarn.lock or package-lock.json)
  • Installed @vue/compiler-sfc version

Logs

0. setup

npx create-vite-app test
cd test
npm i
npm i buefy

Add buefy to index.html

    import { Button } from 'buefy'
    import { createApp } from 'vue'
    import App from './App.vue'

    const app = createApp(App)
    app.mount('#app')
    app.use(Button) // had to add this here

Add a button to App.vue

  <h1>Hello Vite + Vue 3!</h1>
  <b-button>Buefy Button</b-button>

1. run vite or vite build with the DEBUG environment variable set to vite:* - e.g. modify the dev script in your package.json to:

   DEBUG=vite:* vite

   On windows, you will need cross-env:

   cross-env DEBUG=vite:* vite

2. Provide the error log here.

nothing visible on command line

Reproduction

Provide a link to a reproduction repo if applicable.

https://github.com/ais-one/vite-eg

Does not work with Vuex

It can't work with Vuex due to process being undefined when createStore is called

It was looking for process.env.NODE_ENV

The workaround was to include the following in the index.html file where createStore was called...

window.process = { env: { NODE_ENV: 'you can put whatever you want here' } }

Also submitted an issue in Vuex for their attention...

vuejs/vuex#1737

Does vite provide a require.context-like API?

Is your feature request related to a problem? Please describe.
I would like to be able to dynamically read the file objects inside specific directory. Webpack provides API like require.context in order to achieve this.

Describe the solution you'd like
Is there any way within vite that one can perform something similar to require.context to read and parse file objects

Additional context
This would be useful to create dynamic route building with Vue router by reading the contents of the directory.

SFC styles are on top of bundled styles

I'm using Vite with Postcss and Tailwind. After bundling my vite app, styles defined in SFCs are prepend to bundled styles. This is causing tailwind's reset classes to take higher priority than component's styles. If I mark my styles scoped they are takes higher priority but of course scoped styles are not for that.

Source map supports

I have tried do few things with Vite and it's indeed a huge progress. One thing would really help while debugging bigger projects is source map support. It would be nice if I could in Debug Tools see the code being edited not the transpiled code.

May need resolveVuex and resolveVueRouter

Refer to #22

Also refer to the file https://github.com/vuejs/vite/blob/master/src/node/serverPluginModules.ts

There is a resolveVue to resolve Vue JS paths properly.

    if (id === 'vue') {
      const vuePath = resolveVue(root).vue
      debugger
      await cachedRead(ctx, vuePath)
      debugModuleResolution(`vue -> ${getDebugPath(vuePath)}`)
      return
    }

A resolve for Vuex and VueRouter (and possible other libraries) may also be needed...

CSS Plugin error: vite run build

Describe the bug

The vite:css | transform hook is throwing error when CSS has url() with inline image reference
url('data:image/....)'

System Info

• required vite version: 0.11.1
• required Operating System: Windows
• required Node version: 12.13.1
• Optional:
  • npm version: 6.14.4
  • Installed vue version (from yarn.lock or package-lock.json): 3.0.0-beta.9
  • Installed @vue/compiler-sfc version: 3.0.0-beta.9

Logs

[Error: ENOENT: no such file or directory, open 'C:\mk\dev\vuejs\sb\vite.tests\create.build.1\src\data:image\svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A\www.w3.org\2000\svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22\%3E%3C\svg%3E'] {
  errno: -4058,
  code: 'PLUGIN_ERROR',
  syscall: 'open',
  path: 'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\src\\data:image\\svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A\\www.w3.org\\2000\\svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22\\%3E%3C\\svg%3E',
  pluginCode: 'ENOENT',
  plugin: 'vite:css',
  hook: 'transform',
  id: 'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\src\\main.css',
  watchFiles: [
    'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\src\\index.html',
    'src\\main.js',
    'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\node_modules\\vue\\dist\\vue.runtime.esm-bundler.js',
    'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\src\\main.css',
    'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\src\\store\\index.js',
    'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\src\\components\\app\\app.vue'
  ]
}

Since it wasn't related to #57, created new issue
https://github.com/vuejs/vite/blob/01135fa1edede1f46acd7c83d18e5131ebc7cbd7/src/node/buildPluginCss.ts#L13

fixed with: const urlRE = /(url\(\s*['"]?(?!data:))([^"')]+)(["']?\s*\))/

[CLI]: onboard flags to show up help and version information

• create-vite-app --help | -h
• create-vite-app --version | -v

The above flags are inevitable for a CLI utility.

Collaboration with es-dev-server?

hey there 👋
it seems you got quite inspired by es-dev-server 🤗

is there may be room to collaborate? having full support for vue within es-dev-server via a middleware or a "plugin" would certainly sound great 💪

now it seems more like becoming a "fork" with baked in vue features? 🤔

A possible starting point would be a transformer like this

module.exports = {
  responseTransformers: [
    async function processVueFiles({ url, status, contentType, body }) {
      if (url.endsWith('.vue')) {
        const rewritten = await processingVueFile(body);
        return { body: rewritten };
      }
    },
  ],
};

but for more advanced features a koa middleware would be more appropriate.

I am somewhat confident that a koa middleware and/or a babel plugin will have sufficient power to tackle this task... and even if not we would be more then willing to provide additional hooks for vue if needed 🤗

Feel free to discuss here or you can also shoot me a private message on twitter (dms are open)
https://twitter.com/daKmoR

Avoid rewriting the module path if it starts with 'http://' or 'https://'

Currently in version 0.9.1, if we try to use dynamic import with an external URL:

const { map, filter } = await import('https://cdn.pika.dev/async');

The module path will be rewritten to:

const { map, filter } = await import('/@modules/https://cdn.pika.dev/async');

Which causes the following errors on browser:

GET http://localhost:3000/@modules/https://cdn.pika.dev/async net::ERR_ABORTED 404 (Not Found)
TypeError: Failed to fetch dynamically imported module: http://localhost:3000/@modules/https://cdn.pika.dev/async

The simplest way to solve this is to prevent the module path from being rewritten, but it might also be interesting to proxy the request to remotely compile .vue files.

Also, vite is awesome.

Pug support

Is there anyway to write templates with pug language? npm i pug pug-plain-loader didn't worked for myself.

The way the demo is written has changed, see if it works

path resolve is not support folder

Describe the bug

A clear and concise description of what the bug is.

System Info

• required vite version:0.11.3
• required Operating System:
• required Node version:10.13.0
• Optional:
  • npm/yarn version
  • Installed vue version (from yarn.lock or package-lock.json)
  • Installed @vue/compiler-sfc version

Logs

why ?

Support in NW.js and Chromium ~61?

Hello, love how quick Vite is and eager to start playing with it, specifically for the creation of HTML panels inside of Adobe applications. Unfortunately I have a constrained environment in doing so, and am looking for support for CEP 9.0 below:

Component	CEP 6.1 and CEP 7.0	CEP 8.0	CEP 9.0
CEF 3	CEF 3 release branch 2272 Commit e8e1f98ee026a62778eb2269c8e883426db645ea	CEF 3 release branch 2987	CEF 3 release branch 3163
Chromium	41.0.2272.104	57.0.2987.74	61.0.3163.91
Node.js	IO.js 1.2.0	Node.js 7.7.4	Node.js 8.6.0
CEF/Node integration	Node-WebKit 0.12.1 (nw.js)	Node-Webkit 0.21.5	Node-Webkit 0.25
v8	-	-	6.3.292.49

I've been trying to get this running and so far unsuccessful but can't use a CEF debugger because the localhost won't connect to even access the console and see an error, is there anything that would help me out or that I should know about whether this is a lost cause? I can provide a barebones repo and all things necessary to test within >= 2019 Illustrator, After Effects, Photoshop, InDesign, Audition, Animate, Premiere Pro or any other CEP compatible Adobe application.

Thanks!

Changes in CSS breaks all styling

Changes in the css breaks all of the styling in 0.9.x (0.8.1 works)

Follow the getting started guide > Change App.vue css

(Windows 10, Chrome Version 84.0.4128.3, Node 12.9)

Cannot resolve external img at build

Using an external image like https://images.unsplash.com/photo-1551434678-e076c223a692 or https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80 on an img tag on a vue file fails on build with different errors messages depending on the filename. It does work on dev.

I also noticed other bugs on img that might be related:

• an src to an svg file also fails at build with

ReferenceError: _imports_0 is not defined
    at eval (eval at evaluateConstant (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2841:16), <anonymous>:1:1)
    at evaluateConstant (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2841:53)
    at stringifyElement (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2784:29)
    at stringifyNode (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2816:20)
    at stringifyElement (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2800:16)
    at stringifyNode (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2816:20)
    at stringifyElement (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2800:16)
    at stringifyNode (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2816:20)
    at stringifyElement (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2800:16)
    at stringifyNode (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2816:20) {
  code: 'PLUGIN_ERROR',
  plugin: 'vue',
  hook: 'transform',
  id: '/Users/posva/vite-mafacture/App.vue?vue&type=template&id=fd594680',

• Relatives urls without a leading ./ cannot be found

Basic setup for local dev not working

After following the instruction in the readme, I ended up with an error.

I'm using the vue-next webpack template and added a new npm script for vite after yarn add -D vite. I then updated my index.html to what was in the instructions, created a Comp.vue component in src/ but it isn't working. Am I missing something?

// Comp.vue

<template>
  <button @click="count++">{{ count }}</button>
</template>

<script>
export default {
  data: () => ({ count: 0 })
}
</script>

<style scoped>
button {
  color: red;
}
</style>

// index.html

<div id="app"></div>
<script type="module">
  import { createApp } from 'vue'
  import Comp from './Comp.vue'

  createApp(Comp).mount('#app')
</script>

// package.json

{
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --env.prod",
    "serve": "vite --root src"
  },
  "dependencies": {},
  "peerDependencies": {
    "vue": "^3.0.0-alpha.10"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.0-alpha.10",
    "css-loader": "^3.4.2",
    "file-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "url-loader": "^4.0.0",
    "vite": "^0.4.0",
    "vue": "^3.0.0-alpha.10",
    "vue-loader": "^16.0.0-alpha.3",
    "webpack": "^4.42.1",
    "webpack-bundle-analyzer": "^3.6.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

vite 0.11.3 does not work on windows

Describe the bug

Error details is found below in Logs. The last working version is vite 0.11.2

System Info

• required vite version: 0.11.3
• required Operating System: Window 10 Home
• required Node version: Node 12.16

Logs

How to replicate

1. Install and run vite

npx create-vite-app test
cd test
npm i
npm i vite@latest
npm i -D cross-env

2. change package,json to use debug

cross-env DEBUG=vite:* vite

npm run dev

3. navigate to browser and you see the error

There is no error on the command line, only in browser

Reproduction

N.A.