Vue SFC implementation failed.

[dbelyaeff]

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]

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]

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]

mark

[dbelyaeff]

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]

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

[nicedu123]

mark

[davidnagli]

cc @shawwn

[github-actions[bot]]

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.