Vue components fail with "Cannot read property 'parseComponent' of undefined" #1490

lidavidm · 2018-06-04T16:00:33Z

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

parcel/src/assets/VueAsset.js

Line 20 in dc10531

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

The text was updated successfully, but these errors were encountered:

kunggom · 2018-06-04T17:52:10Z

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

ghost · 2018-06-04T18:22:39Z

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

in10se · 2018-06-04T20:13:23Z

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

DeMoorJasper · 2018-06-04T20:56:35Z

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}

tylerlong · 2018-06-06T10:21:48Z

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

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 · 2018-06-07T07:00:52Z

Merged #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.

Seems like this bug parcel-bundler/parcel#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.

webMing · 2020-10-17T02:56:33Z

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:

vue@3.0.0 (/Users/stephanie/Desktop/SourceTree/webpack/node_modules/vue/index.js)
vue-template-compiler@2.6.12 (/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"
}

what should i do next?

DeMoorJasper added the 🐛 Bug label Jun 4, 2018

DeMoorJasper added Good First Issue 🙏 Help Wanted labels Jun 4, 2018

knight-bubble mentioned this issue Jun 5, 2018

Pass compiler of @vue/component-compiler-utils to parser. #1496

Merged

DeMoorJasper closed this as completed Jun 7, 2018

brianzelip mentioned this issue Jun 13, 2018

"Cannot read property 'parseComponent' of undefined" eddyerburgh/parcel-vuejs-template#11

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue components fail with "Cannot read property 'parseComponent' of undefined" #1490

Vue components fail with "Cannot read property 'parseComponent' of undefined" #1490

lidavidm commented Jun 4, 2018

kunggom commented Jun 4, 2018

ghost commented Jun 4, 2018

in10se commented Jun 4, 2018

DeMoorJasper commented Jun 4, 2018 •

edited

tylerlong commented Jun 6, 2018

DeMoorJasper commented Jun 7, 2018

webMing commented Oct 17, 2020 •

edited

Vue components fail with "Cannot read property 'parseComponent' of undefined" #1490

Vue components fail with "Cannot read property 'parseComponent' of undefined" #1490

Comments

lidavidm commented Jun 4, 2018

🐛 bug report

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

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

kunggom commented Jun 4, 2018

ghost commented Jun 4, 2018

in10se commented Jun 4, 2018

DeMoorJasper commented Jun 4, 2018 • edited

tylerlong commented Jun 6, 2018

DeMoorJasper commented Jun 7, 2018

webMing commented Oct 17, 2020 • edited

DeMoorJasper commented Jun 4, 2018 •

edited

webMing commented Oct 17, 2020 •

edited