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

Closed
lidavidm opened this issue Jun 4, 2018 · 7 comments
Closed

Comments

@lidavidm
Copy link

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

@kunggom 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

@ghost
Copy link

@ghost ghost commented Jun 4, 2018

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

@in10se
Copy link

@in10se in10se commented Jun 4, 2018

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

@DeMoorJasper
Copy link
Member

@DeMoorJasper 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
Copy link

@tylerlong 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
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
Copy link
Member

@DeMoorJasper DeMoorJasper commented Jun 7, 2018

Merged #1496

devongovett pushed a commit that referenced this issue Oct 15, 2018
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
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.
KrysKruk pushed a commit to neftjs/parcel-bundler that referenced this issue Jun 17, 2019
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
Copy link

@webMing webMing commented Oct 17, 2020

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?

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

Successfully merging a pull request may close this issue.

None yet
6 participants