Parcel: Vue components fail with "Cannot read property 'parseComponent' of undefined"

Created on 4 Jun 2018 · 7Comments · Source: parcel-bundler/parcel

🐛 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: https://github.com/parcel-bundler/parcel/blob/dc10531e27c4ba6cb33ff52d49eddf57b2d17b8b/src/assets/VueAsset.js#L20

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 <[email protected]>",
  "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 :smiley:

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

Good First Issue Bug Help Wanted

Source

lidavidm

👍7

Most helpful comment

yarn add --dev @vue/[email protected] is the workaround.

tylerlong on 6 Jun 2018

👍11 🎉8 😕5 👀2

All 7 comments

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

kunggom on 4 Jun 2018

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

ghost on 4 Jun 2018

👍3

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

in10se on 4 Jun 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’s just comparing changes between compiler-utils 1 & 2 and figuring out a way to support both

_{Sent with GitHawk}

DeMoorJasper on 4 Jun 2018

👍4

yarn add --dev @vue/[email protected] is the workaround.

tylerlong on 6 Jun 2018

👍11 🎉8 😕5 👀2

Merged #1496

DeMoorJasper on 7 Jun 2018

🎉1

Have the same question, install @vue/component-compiler-utils not work for me, bellow is error message:

assets by status 63.6 KiB [cached] 2 assets
orphan modules 351 KiB [orphan] 9 modules
runtime modules 1.7 KiB 5 modules
cacheable modules 363 KiB
modules by path ./src/ 353 KiB
./src/main.js + 9 modules 351 KiB [built] [code generated]
./src/vue/App.vue 39 bytes [built] [code generated] [2 errors]
./node_modules/css-loader/dist/cjs.js!./src/css/cty.css 694 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[2]!./src/less/spc.less 689 bytes [built] [code generated]
modules by path ./node_modules/ 10.4 KiB
./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/cssWithMappingToString.js 2.21 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]

ERROR in ./src/vue/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):

Vue packages version mismatch:

[email protected] (/Users/stephanie/Desktop/SourceTree/webpack/node_modules/vue/index.js)
[email protected] (/Users/stephanie/Desktop/SourceTree/webpack/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
@ ./src/main.js 7:0-32 10:7-10

ERROR in ./src/vue/App.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (/Users/stephanie/Desktop/SourceTree/webpack/node_modules/@vue/component-compiler-utils/dist/parse.js:15:23)
at Object.module.exports (/Users/stephanie/Desktop/SourceTree/webpack/node_modules/vue-loader/lib/index.js:67:22)
@ ./src/main.js 7:0-32 10:7-10

webpack 5.1.0 compiled with 2 errors in 3988 ms

other message:

in package.json :

"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/plugin-transform-runtime": "^7.12.0",
"@babel/preset-env": "^7.11.5",
"@vue/component-compiler-utils": "^3.2.0",
"babel-loader": "^8.1.0",
"css-loader": "^5.0.0",
"file-loader": "^6.1.1",
"less": "^3.12.2",
"less-loader": "^7.0.2",
"style-loader": "^2.0.0",
"vue-loader": "^15.9.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.1.0",
"webpack-cli": "^4.0.0"
},
"dependencies": {
"@babel/runtime": "^7.12.0",
"vue": "^3.0.0"
}