vitejs / vite Goto Github PK
View Code? Open in Web Editor NEWNext generation frontend tooling. It's fast!
Home Page: http://vitejs.dev
License: MIT License
Next generation frontend tooling. It's fast!
Home Page: http://vitejs.dev
License: MIT License
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"
},
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>
vite
version: 0.11.3
Operating System: Windows
Node version: 14.2.0
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'
import { createRouter, createWebHistory } from 'vue-router'
Would it be fine for the create script to change directories and install dependencies automatically as vue-cli
does?
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.
Error details is found below in Logs. The last working version is vite 0.11.2
vite
version: 0.11.3How to replicate
npx create-vite-app test
cd test
npm i
npm i vite@latest
npm i -D cross-env
cross-env DEBUG=vite:* vite
npm run dev
There is no error on the command line, only in browser
N.A.
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”.
$ npx create-vite-app my-vite
$ cd my-vite
$ npm install
$ npm run dev
vite
version: 0.0.0 devmain.ts and lang="ts" in vue components?
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...
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.
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
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
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.
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?
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.
vite
version: 0.11.1vue
version: beta.9@vue/compiler-sfc
version: beta.9Install vite
and use this component as App.vue
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
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
?
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"
The vite:css | transform hook is throwing error when CSS has url() with inline image reference
url('data:image/....)'
vite
version: 0.11.1vue
version (from yarn.lock
or package-lock.json
): 3.0.0-beta.9@vue/compiler-sfc
version: 3.0.0-beta.9[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*\))/
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.
vite
version: 0.11.1vue
version (from yarn.lock
or package-lock.json
) 3.0.0-beta.9@vue/compiler-sfc
version 3.0.0-beta.9This 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"
}
Is Testing Supported In vite
If Supported How To Use vue-uest-utils-next
with vite
create-vite-app --help | -h
create-vite-app --version | -v
The above flags are inevitable for a CLI utility.
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.
vite
version: 0.12.0vue
version (from yarn.lock
or package-lock.json
)@vue/compiler-sfc
versionnpx 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>
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
Provide the error log here.
nothing visible on command line
Provide a link to a reproduction repo if applicable.
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
Taking inspiration from the following:
...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?).
rt
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>
.
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.
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!
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' }```
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:
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...
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"
}
}
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
vite
version: 0.11.3This 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.
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
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.
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:
src
to an svg
file also fails at build withReferenceError: _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',
./
cannot be foundIs there anyway to write templates with pug language? npm i pug pug-plain-loader
didn't worked for myself.
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.
With New Release --sourcemap
Is Supported To Create Source Map When Building Application. Add This Information To README.md
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'
]
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?
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 ?
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?
A clear and concise description of what the bug is.
vite
version:0.11.3vue
version (from yarn.lock
or package-lock.json
)@vue/compiler-sfc
versionwhy ?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.