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 components fail with "Cannot read property 'parseComponent' of undefined" #1490

Closed
lidavidm opened this Issue Jun 4, 2018 · 6 comments

Comments

Projects
None yet
6 participants
@lidavidm

lidavidm commented Jun 4, 2018

馃悰 bug report

Importing a Vue component fails with this error message:

App.vue: Cannot read property 'parseComponent' of undefined

The problem: @vue/component-compiler-utils expects a compiler object in the options passed to parse. Parcel loads the template compiler, but does not pass it, in VueAsset.js:

return this.vue.parse({

The fix is to add compiler: this.vueTemplateCompiler to the options object in that call.

馃帥 Configuration (.babelrc, package.json, cli command)

Command: yarn parcel watch --no-hmr --public-url . index.html

package.json:

{
  "name": "shelf-web",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "David M. Li <li.davidm96@gmail.com>",
  "license": "MPL-2.0",
  "devDependencies": {
    "@vue/component-compiler-utils": "^2.0.0",
    "parcel-bundler": "^1.8.1",
    "vue-template-compiler": "^2.5.16"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

No .babelrc.

馃 Expected Behavior

The Vue template should work seamlessly, like everything else in Parcel 馃槂

馃槸 Current Behavior

The following error happens:

$ yarn parcel watch --public-url . index.html
yarn run v1.6.0
$ /home/lidavidm/Code/shelf/shelf-server/static/node_modules/.bin/parcel watch --public-url . index.html
馃毃  /home/lidavidm/Code/shelf/shelf-server/static/src/App.vue: Cannot read property 'parseComponent' of undefined
    at Object.parse (/home/lidavidm/Code/shelf/shelf-server/static/node_modules/@vue/component-compiler-utils/dist/parse.js:14:23)
    at VueAsset.parse (/home/lidavidm/Code/shelf/shelf-server/static/node_modules/parcel-bundler/src/assets/VueAsset.js:20:21)

馃拋 Possible Solution

See above: VueAsset.js should pass compiler to this.vue.parse

馃敠 Context

馃捇 Code Sample

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>shelf</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="src/main.js"></script>
    </body>
</html>

main.js:

import Vue from "vue";
import App from "./App.vue";

new Vue({
    el: "#app",
    render: h => h(App)
});

App.vue:

<template>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: "app",
        data() {
            return {
                msg: "Welcome to Your Vue.js App!",
            };
        },
    };
</script>

<style lang="css">
    #app {
        color: #56b983;
    }
</style>

馃實 Your Environment

Software Version(s)
Parcel 1.8.1
Node v10.1.0
npm/Yarn Yarn 1.6.0
Operating System Arch Linux
@kunggom

This comment has been minimized.

kunggom commented Jun 4, 2018

I have a same problem.
My environment: MacOS 10.13.5, Node v9.2.1, npm 5.8.0, parcel 1.8.1

@crsGyj2017

This comment has been minimized.

crsGyj2017 commented Jun 4, 2018

@ vue/component-compiler-utils upgrade from v1.3 to v2.0锛 that is the reason .

@in10se

This comment has been minimized.

in10se commented Jun 4, 2018

Same problem here on Win 10, Node v8.11.2, npm 5.6.0, parcel 1.8.1.

@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Jun 4, 2018

Install latest 1.x.x version of compiler-utils and it should work as a workaround untill we figure out how to properly update with backward capability. Feel free to take on this issue as it鈥檚 just comparing changes between compiler-utils 1 & 2 and figuring out a way to support both

Sent with GitHawk

@tylerlong

This comment has been minimized.

tylerlong commented Jun 6, 2018

yarn add --dev @vue/component-compiler-utils@1.3.1 is the workaround.

DeMoorJasper added a commit that referenced this issue Jun 7, 2018

Pass compiler of @vue/component-compiler-utils to parser. (#1496)
Seems like this bug #1490 appeared, after the change made in this commit vuejs/component-compiler-utils@caa1538#diff-3bebbbb54c7d798b4200eb324ebd4500R17

Tested for older version of vuejs/component-compiler-utils, works pretty fine.
@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Jun 7, 2018

Merged #1496

devongovett pushed a commit that referenced this issue Oct 15, 2018

Pass compiler of @vue/component-compiler-utils to parser. (#1496)
Seems like this bug #1490 appeared, after the change made in this commit vuejs/component-compiler-utils@caa1538#diff-3bebbbb54c7d798b4200eb324ebd4500R17

Tested for older version of vuejs/component-compiler-utils, works pretty fine.

devongovett pushed a commit that referenced this issue Oct 15, 2018

Pass compiler of @vue/component-compiler-utils to parser. (#1496)
Seems like this bug #1490 appeared, after the change made in this commit vuejs/component-compiler-utils@caa1538#diff-3bebbbb54c7d798b4200eb324ebd4500R17

Tested for older version of vuejs/component-compiler-utils, works pretty fine.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment