boltdoggy / parcel-plugin-vue

⚠️ parcel-bundler/parcel @1.7.0 support Vue Now. This plugin will be not recommended.

Hi there 👋

parcel-plugin-vue's Issues

Vue imported twice

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

.vue file can not be hot update

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.

Maximum call stack size exceeded when add vue coms.

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

How to run Autoprefixer on styles?

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)

[Bug] @import statement in <style> section does not work

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;
}

Vue SFC implementation failed.

Hi there!

🐛 bug report

Vue SFC doesn't loads properly.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

{
  "presets": ["env","vue"],
}

package.json

{
  "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"
  }
}

index.pug

html
	head
		title Test
	body
		h1 Test
		#root
			app
		script(src="./app.coffee")

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

App.vue

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

🤔 Expected Behavior

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.

🌍 Your Environment

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.

can't use with parcel-plugin-typescript

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!

How to use assets within `style` part?

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

`script lang="ts"` not works

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

extractCss bug in production environment

<!- 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;
    }

需要 1.4.1 版本的 parcel 才能兼容 parcel-plugin-vue + babel 的 import()异步导入

如题

[dependency error] No matching version found for require-from-string@^1.1.0

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

Problem with images in html templates inside .vue components

<!- 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

Console outputs same error multiple times

Description

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

Enviroment

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

JSPackager issue

<!- 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

Possible solution

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);
  }

ws has hardcoded localhost

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

import local .js file in .vue file error

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'

.vue file is undefined

<!- description ->

Please help. Parcel builds without error but my .vue file is being imported as undefined when trying to use your plugin.

<!- repo url ->

https://bitbucket.org/RichardCooke/t/src/189e6301660040607c1fde89ec54a9f87c648c65/src_simple/?at=master

<!- 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 }
	});
}

Support CSS Extraction

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?

Process *.vue throws exception

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?

Error: Cannot find module 'parcel-bundler/src/packagers/JSPackager.js'

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)

Images in Vue template don't transform

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.

Hot-reload/compile not working with single file components

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)

Dynamic import - Error: Cannot find module 'xxx'

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

Deprecated too soon

There's a 7 day old issue in parcel where shorthand vue properties won't build for production

parcel-bundler/parcel#1124

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 💕

Cannot read property 'targets' of undefined

<!- 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

Update the example to include other required files?

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.

Source map does not work

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

Unknown custom element - using Parcel, SFCs and TypeScript

Vue Version

2.5.13

Reproduction link

https://github.com/smutnyleszek/sicx

Steps to reproduce

1. npm install
2. npm start
3. open http://localhost:2038/

What is expected?

Test custom element should be rendered.

What is actually happening?

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.

Can't find module 'vue-hot-reload-api'

<!- 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

Problem while importing modules

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

Hot Reload stop worked in html files

<!- 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

Style import doesn't work if async import used

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