boltdoggy / parcel-plugin-vue Goto Github PK
View Code? Open in Web Editor NEW⚠️ parcel-bundler/parcel @1.7.0 support Vue Now. This plugin will be not recommended.
Home Page: https://github.com/parcel-bundler/parcel
⚠️ parcel-bundler/parcel @1.7.0 support Vue Now. This plugin will be not recommended.
Home Page: https://github.com/parcel-bundler/parcel
<!- description ->
Please help. Parcel builds without error but my .vue file is being imported as undefined
when trying to use your plugin.
<!- repo url ->
<!- environment ->
Software | Version(s) |
---|---|
parcel-plugin-vue | latest |
Parcel | latest |
Vue | latest |
Node | latest |
npm/Yarn | latest |
Operating System | Ubuntu latest |
package.json
{
"name": "dailypractice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+ssh://[email protected]/rjeapps/dailypractice.git"
},
"author": "Richard JE Cooke",
"license": "UNLICENSED",
"homepage": "https://bitbucket.org/rjeapps/dailypractice#readme",
"private": true,
"devDependencies": {
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"eslint": "^4.14.0",
"parcel-bundler": "^1.3.1",
"parcel-plugin-vue": "^1.4.0",
"vue-template-compiler": "^2.5.13"
},
"dependencies": {
"vue": "^2.5.13",
"vue-material": "^1.0.0-beta-7",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
}
}
main.js
import Vue from '../node_modules/vue/dist/vue';
import { Welcome } from './app/widgets/welcome/welcome.vue';
window.onload = startVue;
function startVue()
{
console.dir(Welcome); //undefined!
new Vue({
'el': '#app',
'template': Welcome,
'components': { Welcome }
});
}
<template lang="pug">
#app Hello World
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class App extends Vue {}
</script>
Error:
🚨 /local/GitHub/parcel-study/src/views/App.vue:6:0: 'import' and 'export' may only appear at the top level (6:0)
4 | <script lang="ts">
5 | import { Component, Vue } from 'vue-property-decorator'
> 6 |
| ^
7 | @Component
8 | export default class App extends Vue {}
9 | </script>
Would be nice to have minimal package*
, .babelrc
, etc. file in there?
As a side note, while trying to use this I get:
Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/c9e91b24666c1a67fcbdfea3f2ce2189.vue') is not a valid name.
I'm having an issue if i'm using async import and css import.
Seems it's issue related to HMR
index.js
import './bug.css';
setTimeout(() => {
import('./test')
.then(module => console.log(module))
;
}, 1000);
Issue
http://prntscr.com/imy88a
http://prntscr.com/imy8fk
Software | Version(s) |
---|---|
parcel-plugin-vue | BoltDoggy/parcel-plugin-vue#develop |
Parcel | 1.6.2 |
Vue | 2.5.13 |
Node | 9.3.0 |
This is a great plugin of parcel bundler, but I want extracting all component CSS into a single file for better performance. How can I do that?
Works:
sfc.vue
<style>
body {
margin-top: 50px;
}
</style>
Does not work:
sfc.vue
<style>
@import './style.css';
</style>
style.css
body {
margin-top: 50px;
}
I have a vue single file looks like:
<template>
<form ref="form"
class="el-form"
:class="labelClass"
@submit.prevent="submit">
<slot></slot>
</form>
</template>
<script>
export default {
name: 'ElForm',
componentName: 'ElForm',
provide() {
return {
elForm: this,
}
},
...
}
</script>
The file folked from ElementUI, I added some custom methods to it.
Webpack succeed to process it, but parcel throws exception:
d:\Works\xt-static\src\components\Form.vue:4:0: 'import' and 'export' may only appear at the top level (4:0)
2 | <form ref="form"
3 | class="el-form"
> 4 | :class="labelClass"
| ^
5 | @submit.prevent="submit">
6 | <slot></slot>
7 | </form>
How do i fix it?
when i change the .vue file, my browser doesn't auto reload the page.
but when i change the entry.js, it will auto reload.
When I use import Vue from "vue/dist/vue.esm.js", it included twice (in console shows "You are running Vue in development mode." twice)
First: from import Vue from "vue/dist/vue.esm.js",
Second: any component importing.
Is there are settings to configure vue.esm to use globally?
Software | Version(s) |
---|---|
parcel-plugin-vue | |
Parcel | 1.6.1 |
Vue | 2.5.13 |
Node | 8.9.4 |
npm/Yarn | 5.6.0 |
Operating System | Win 7 x64 |
I can't get Autoprefixer to run on the scss in a project using this Parcel plugin.
It doesn't seem to be working doing a regular @import 'path/to/style.scss'
nor in single file components' <style scoped lang="scss">...</style>
. I have the following config:
.postcssrc
{
"plugins": {
"autoprefixer": true
}
}
.browserlistrc
last 4 versions
dependencies
"devDependencies": {
"babel-plugin-module-resolver": "^3.0.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-vue": "^2.0.0",
"css-loader": "^0.28.9",
"node-sass": "^4.7.2",
"parcel-bundler": "^1.4.1",
"parcel-plugin-vue": "^1.5.0",
"postcss-modules": "^1.1.0",
"postcss-scss": "^1.0.3",
"vue-template-compiler": "^2.5.13"
},
"dependencies": {
"autoprefixer": "^7.2.5",
"bootstrap-sass": "^3.3.7",
"inline-style-prefixer": "^4.0.0",
"lodash": "^4.17.4",
"vue": "^2.5.13",
"vue-outside-events": "^1.1.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
}
Not sure if I'm missing some config? Autoprefixer worked when I was using Parcel without Vue, hence why I've opened the issue here. My apologies if this is an issue with another library.
Software | Version(s) |
---|---|
parcel-plugin-vue | ^1.5.0 |
Parcel | ^1.4.1 |
Vue | ^2.5.13 |
Node | 8.1.2 |
npm/Yarn | 1.3.2 (Yarn) |
Operating System | MacOs Sierra (10.12.6) |
<!- description ->
doesn't output css when in production environment, seems a bug in VueAsset generate function.
<!- environment ->
Software | Version(s) |
---|---|
parcel-plugin-vue | 1.5.0 |
Parcel | 1.5.1 |
Possible Resolution
async generate() {
ownDebugger('generate');
let ret = await super.generate() || {};
ret.css = this.outputAll.css;
return ret;
}
Hello @BoltDoggy , thanks for your great plugin!
When I use assets within style
part, for example:
.logo {
background: url('../assets/images/logo.png') no-repeat center/100%;
}
It cannot resolve assets for me, and parcel will not generate the assets, so...do you have any idea about it?
Software | Version(s) |
---|---|
parcel-plugin-vue | 1.5.0 |
Parcel | 1.6.2 |
Vue | 2.5.13 |
Node | 9.3.0 |
npm/Yarn | 5.6.0 (npm) |
Operating System | macOS Sierra 10.12.6 with Chrome 64 |
There seems some problem while importing node modules in .vue file.
i imported a small module and there was some error on console like module id 15 not found
though importing module on react app was working well.
Also importing css in js file was throwing error
import someJs from 'someJs'
console.log(someJs)
It runs right.
import someJs from 'someJs'
console.log(someJs)
import com1 from 'com1.vue'
import com2 from 'com2.vue'
It goes wrong.
The brower reported an error:
Uncaught RangeError: Maximum call stack size exceeded
Hi there!
🐛 bug report
{
"presets": ["env","vue"],
}
{
"name": "parcel",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "parcel index.pug"
},
"dependencies": {
"babel-preset-vue": "^2.0.1",
"parcel-plugin-pug": "^0.2.4",
"parcel-plugin-vue": "^1.5.0",
"pug": "^2.0.0-rc.4",
"pug-loader": "^2.3.0",
"vue": "^2.5.13"
},
"devDependencies": {
"babel-preset-env": "^1.6.1",
"coffeescript": "^2.2.0"
}
}
html
head
title Test
body
h1 Test
#root
app
script(src="./app.coffee")
import Vue from 'vue/dist/vue.esm'
import App from './App'
new Vue
el: "#root"
render: (h) => h(App)
module.hot.accept() if module.hot
<template lang="pug">
div
h1 {{text}}
</template>
<script lang="coffee">
export default
name: 'app'
data: ()->
text: 'Test'
</script>
<style lang="stylus">
background rgba(0,0,0,0.1)
</style>
Don't pay attention to pug and coffee. I've tried before using clean HTML and JS. The results were the same.
Every time I've got following error:
[Vue warn]: Failed to mount component: template or render function not defined.
Software | Version(s) |
---|---|
Parcel | Latest |
Node | Latest |
npm/Yarn | Latest |
Operating System | macOS Latest |
At the same time I've get next error:
🚨 /Users/dima/Sites/parcel/App.vue:3:0: 'import' and 'export' may only appear at the top level (3:0)
1 | <template lang="pug">
2 | div
> 3 | h1 {{text}}
| ^
4 | </template>
5 | <script lang="coffee">
6 | export default
The error is about PUG template in Vue SFC App.vue
. It's not a script section.
Looks like it's an error of embed linter.
Script errors in .vue files output the same error multiple times, this error originates from vueify-bolt , and is inherited from vueify. I am not sure who should resolve it or if the output from vueify has a purpose at all.
https://github.com/BoltDoggy/vueify-bolt/blob/master/lib/compiler.js#L302
This is a output of my inspector for the node process.
This is the output in the CLI
Software | Version(s) |
---|---|
parcel-plugin-vue | 1.5.0 |
Parcel | 1.6.2 |
Vue | 2.5.16 |
Node | 8.9.4 |
npm/Yarn | yarn 1.5.x |
Operating System | Win 10 x64 |
There's a 7 day old issue in parcel where shorthand vue properties won't build for production
I feel this is not an acceptable alternative at this point for most people. Especially if you're using components from a 3rd party like I am and have no control over the template syntax used.
And also, from the readme / deprecation notice:
Maybe I will be forgotten, but I will be continue.
I won't forget how easy you made it to work with Vue vs webpack and I am very appreciative even if the project is eventually deprecated. My warmest thanks 💕
<!- description ->
Hot Reload stop worked in html files if parcel-plugin-vue used.
You may reproduce this bug in your parcel-vue-demo. If change vue file - hmr work fine, browser reloaded. but if you try change index.html (add h1 tag with text in body, for example) - browser not reloaded ((
For example, in https://github.com/parcel-bundler/examples with vue as js file - hmr in html worked fine.
<!- repo url ->
Show a repo url: https://github.com/lc60005457/parcel-vue-demo
<!- environment ->
Software | Version(s) |
---|---|
parcel-plugin-vue | 1.4.0 |
Parcel | 1.3.1 |
Vue | 2.5.13 |
Node | v9.3.0 |
npm/Yarn | 5.5.1 |
Operating System | Ubuntu 16.04 |
Hello,
I've got a bit strange issue when i'm trying to create a build
and hardly understand what's a reason and how to solve it. The issue appears if i'm using dynamic import, for example:
import('./../Application/index.vue').catch(e => alert(e))
I'm revcieving the error
Error: Cannot find module '209'
25eef25dd6d82b322c9283ece5115b27.js:752 Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
at Ke (25eef25dd6d82b322c9283ece5115b27.js:752)
at 25eef25dd6d82b322c9283ece5115b27.js:752
at 25eef25dd6d82b322c9283ece5115b27.js:752
at
There's an interesting thing,
If i run parcel index.html --no-cache
then everyhing work correct
However if i do parcel build index.html --public-url ./ --out-dir www --no-cache
the error described above appears. I'll be thankful for any hints.
Thank you.
PS. If instead of dynamic import use usual import, then it works in build
too.
In my package.json
"dependencies": {
"babel-polyfill": "^6.26.0",
"cordova-android": "^7.0.0",
"cordova-browser": "^5.0.3",
"cordova-ios": "^4.5.4",
"cordova-plugin-whitelist": "^1.3.3",
"onsenui": "^2.8.3",
"vue": "^2.5.13",
"vue-onsenui": "^2.4.3",
"vue-resource": "^1.3.5",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13",
"vuex": "^3.0.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue": "^2.0.0",
"css-loader": "^0.28.8",
"node-sass": "^4.7.2",
"parcel-bundler": "^1.3.1",
"parcel-plugin-vue": "^1.5.0"
}
in index.html
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
</head>
<body>
<div id="application"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
in index.js
"use strict";
// JS
import 'babel-polyfill';
import Vue from 'vue';
// Import Index component
import Index from './components/Index/index.vue';
const application = new Vue({
render: h => h(Index),
});
application.$mount('#application');
in components/Index/index.vue
<template>
<div>
<application></application>
</div>
</template>
<style>
</style>
<script>
export default {
name: 'index',
components: {
application: () => import('./../Application/index.vue').catch(e => alert(e))
}
}
</script>
in `components/Application/index.vue`
<template>
<div>
{{ title }}
</div>
</template>
<style>
</style>
<script>
export default {
data() {
return ({
title: 'Hello World! New Order!',
});
}
}
</script>
Software | Version(s) |
---|---|
parcel-plugin-vue | 1.5.0 |
Parcel | 1.4.1 |
Vue | 2.5.13 |
Node | 9.3.0 |
npm/Yarn | 5.5.1 |
Operating System | Windows 10 / 1703, 15063.850 |
Hello.
In my package.json
:
...
"dependencies": {
"vue": "^2.5.13",
"parcel-bundler": "^1.4.1",
"parcel-plugin-vue": "^1.5.0",
"vue-template-compiler": "^2.5.13"
},
"devDependencies": {
"babel-preset-env": "^1.6.1"
}
...
After npm install
at clean project I see this error:
$ npm install
npm ERR! code ETARGET
npm ERR! notarget No matching version found for require-from-string@^1.1.0
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'cosmiconfig'
npm ERR! notarget
...
When I delete parcel-plugin-vue
from package.json
dependencies — everything is okay.
How to solve this?
Software | Version(s) |
---|---|
parcel-plugin-vue | 1.5.0 |
Parcel | 1.4.1 |
Vue | 2.5.13 |
Node | 9.3.0 |
npm/Yarn | 5.6.0 |
Operating System | macOS 10.13.2 |
<!- description ->
There has been an issue, concerning a bug inside the parcel repo for quite some time that actually had to do with this plugin.
parcel-bundler/parcel#659
<!- repo url ->
https://github.com/bulatie/parcle-bug-example
<!- environment ->
Software | Version(s) |
---|---|
parcel-plugin-vue | 1.5.0 |
Parcel | 1.6.1 |
Rewriting start function to something like this:
async start() {
this.first = true;
this.dedupe = new Map();
this.bundleLoaders = new Set();
this.externalModules = new Set();
if (this.options.target === 'electron') {
prelude =
`process.env.HMR_PORT=${
this.options.hmrPort
};process.env.HMR_HOSTNAME=${JSON.stringify(
this.options.hmrHostname
)};` + prelude;
}
await this.dest.write(prelude + '({');
this.lineOffset = lineCounter(prelude);
}
如题
Using this parcel-plugin-vue, I found the generated bundle file does not include the comment of sourceMappingURL in the end. Causing the browser unable to map to the source files.
I tried removing the parcel-plugin-vue, and did not import vue files, it works with the correct source map.
So I think it should be some issue with this plugin.
Here's my repo code that can reproduce this issue:
Show a repo url: https://github.com/wingland/vue-ts-parcel-starter
Software | Version(s) |
---|---|
parcel-plugin-vue | 1.5.0 |
Parcel | 1.6.2 |
Vue | 2.5.16 |
Node | 8.9.3 |
Yarn | 1.3.2 |
Operating System | Mac OSX |
Server running at http://localhost:1234
🚨 Cannot find module 'parcel-bundler/src/assets/JSAsset'
Error: Cannot find module 'parcel-bundler/src/packagers/JSPackager.js'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (/Users/towry/.nvm/versions/node/v8.9.3/lib/node_modules/parcel-bundler/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/Users/towry/workspace/nodenv/abc/node_modules/parcel-plugin-vue/src/VueAsset.js:3:17)
at Module._compile (/Users/towry/.nvm/versions/node/v8.9.3/lib/node_modules/parcel-bundler/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
Using a single file component, with src
attributes on <template>
& <style>
eg.
SomeComponent.vue:
<template src="./button.html" />
<style lang="scss" scoped src="./button.scss" />
Changes made to either of those files respectivly, doesn't cause any recompiling of Parcel. I have to go into SomeComponent.vue and re-save that file for it to compile.
Software | Version(s) |
---|---|
parcel-plugin-vue | ^1.5.0 |
Parcel | ^1.4.1 |
Vue | ^2.5.13 |
Node | 8.1.2 |
npm/Yarn | 1.3.2 (Yarn) |
Operating System | MacOs Sierra (10.12.6) |
<!- description ->
Uncaught Error: Cannot find module 'vue-hot-reload-api'
<!- repo url ->
Show a repo url: https://github.com/chinadbo/vue-parcel
<!- environment ->
Software | Version(s) |
---|---|
parcel-plugin-vue | 1.5.0 |
Parcel-bundler | 1.6.2 |
Vue | 2.5.13 |
Node | 9.4.0 |
npm/Yarn | yarn |
Operating System | MacOS |
<!- description ->
Running this simple template results in an error ENOENT: no such file or directory, open '[... long path]\dist\3c457f634d3264a25182eb5d648345ad.png'
basically saying it can't find the png-logo in the dist folder. Obviously the image inside the template (inside the .vue file) gets recongnized but won't be copied over to distribution.
If I move the img tag to the index.html no problem occurs, that's why my guess is, that the problem is located in the vue plugin.
<!- repo url ->
https://github.com/vue-template/parcel
<!- environment ->
Software | Version(s) |
---|---|
parcel-plugin-vue | 1.5.0 |
Parcel | 1.4.1 |
Vue | 2.5.13 |
Node | 8.2.1 |
npm/Yarn | 5.6.0 |
Operating System | Windows 7 / Windows 10 |
If I use parcel-plugin-vue only like:
// index.js
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: '#app',
render: h => h(App)
})
app.vue:
<template>
<section class="app">
<h1>Hello World</h1>
</section>
</template>
But when I change it to index.ts
, there is an error:
Uncaught TypeError: Cannot read property 'split' of undefined
in version = Vue.version.split('.').map(Number)
Is there something wrong with my config?
Waiting for response. THX anyway!
description
When using a different hostname (like IP) the HMR still points to localhost.
reproduction
parcel 1.4.1 using 0.0.0.0 as host and accessing from another machine by IP gives this error on the console browser
fix?
I manually edited src/builtins/hmr-runtime.js changing line 19 with
' + global.location.hostname + '
as suggested on this pull from parcel https://github.com/parcel-bundler/parcel/pull/476/files
write app.vue like this
import foo from './foo'
import './main.scss'
then got this error
parcel-demo.js:32 Uncaught Error: Cannot find module './foo'
Hello.
I try to add to your default example image (putted on one dir with index.vue
file), like this:
// index.vue
<template>
<div>
<img src="./logo.png" alt="logo">
Hello {{ World }}!<ComponentA />
</div>
</template>
...
But if I run parcel index.html
— image don't placed in dist
dir and address stay ./logo.png
.
If I put image to index.html
file — all okay. How can fix it? Please.
<!- description ->
Some description.
<!- repo url ->
Show a repo url: https://github.com/lc60005457/parcel-vue-demo
<!- environment ->
Software | Version(s) |
---|---|
parcel-plugin-vue | |
Parcel | |
Vue | |
Node | |
npm/Yarn | |
Operating System |
2.5.13
https://github.com/smutnyleszek/sicx
npm install
npm start
Test custom element should be rendered.
An error:
Unknown custom element: <test> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App>
<Root>
I am learning Vue, so I did rewrite this few times to try making it work. I tried lookin at all other "unknown custom element" issues here, but couldn't find any solution. I have "name" provided in children and I've put them in components
object in parent SFC.
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.