Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue SFC implementation failed. #732

Closed
dbelyaeff opened this issue Feb 2, 2018 · 8 comments
Closed

Vue SFC implementation failed. #732

dbelyaeff opened this issue Feb 2, 2018 · 8 comments

Comments

@dbelyaeff
Copy link

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
@dbelyaeff
Copy link
Author

Find issue reason.

Parcel doesn't automatically catch file by it's extension:

import App from './App'

File extension should be implicit.

import App from './App.vue'

@dbelyaeff
Copy link
Author

dbelyaeff commented Feb 2, 2018

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.

@lkdghzh
Copy link

lkdghzh commented Feb 2, 2018

mark

@dbelyaeff
Copy link
Author

I've found out that it's coffeescript compiler problem.

<template lang="pug">
div
	h1 {{text}}
	ui-alert() Fix this
</template>
<script lang="coffee">
export default 
	name: 'app'
	data: ->
		text: 'Test6'
</script>
<style lang="stylus">
body
	background rgba(0,0,0,0.1)
h1
	font-size 2em
</style>

When I rewrote coffee to standard JS, everything become works.

Please fix coffee compiler for Vue Single File Components.

@laosb
Copy link

laosb commented Feb 7, 2018

Sounds like you should report to parcel-plugin-vue.

@nicedu123
Copy link

mark

@davidnagli
Copy link
Contributor

cc @shawwn

@github-actions
Copy link

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants