Reputation: 2093

Every vue component returning Cannot read property 'parseComponent' of undefined

So I've tried researching this but none of the solutions are working. I think it's an issue with some of my vue dependencies, potentially vue-loader, " but I'm not sure what to do to fix it. I have tried:

deleting node_modules and re-running npm install
npm update
I've tried removing vue-loader completely
tried adding, removing, and updating @vue/component-compiler-utils
tried changing the version of the above to three different things
tried running composer install and composer update
creating a new temp staging branch from master just in case it was some weird git error and building from that

What am I missing here? Every vue component on my staging site returns this same error. The weirdest thing is that the staging server is a direct clone of our production server, where everything works completely smoothly and I get zero errors.

The Errors:

ERROR in ./resources/assets/js/components/component.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (/var/www/site/node_modules/@vue/component-compiler-utils/dist/parse.js:14:23)
    at Object.module.exports (/var/www/site/node_modules/vue-loader/lib/index.js:67:22)
 @ ./resources/assets/js/app.js 60:29-81
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

I've tried installing these warnings' dependencies as well but still get the same error above, I'm including these because it's what pops up when I run my bash script and run npm install from my staging branch:

npm WARN [email protected] requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

package.json dependencies

"devDependencies": {
    "axios": "^0.19.0",
    "babel-preset-stage-2": "^6.24.1",
    "browser-sync": "^2.26.7",
    "browser-sync-webpack-plugin": "^2.2.2",
    "cross-env": "^5.2.0",
    "eslint": "^6.1.0",
    "eslint-config-standard": "^13.0.1",
    "eslint-loader": "^2.2.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.2.3",
    "exports-loader": "^0.6.4",
    "imports-loader": "^0.7.1",
    "jquery": "^3.3.1",
    "laravel-mix": "^4.1.2",
    "lodash": "^4.17.11",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.22.10",
    "vue": "^2.6.10"
  },
   "dependencies": {
    "@vue/component-compiler-utils": "^3.1.1",
    "ajv": "^6.10.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.3.1",
    "braces": "^2.3.1",
    "es6-promise": "^4.2.6",
    "font-awesome": "^4.7.0",
    "luxon": "^1.12.1",
    "moment": "^2.24.0",
    "popper": "^1.0.1",
    "popper.js": "^1.14.7",
    "sass-loader": "^7.1.0",
    "vue-datetime": "^1.0.0-beta.10",
    "vue-datetime-picker": "^0.2.1",
    "vue-full-calendar": "^2.7.0",
    "vue-loader": "^15.8.3",
    "vue-router": "^3.0.2",
    "vue-template-compiler": "2.6.10",
    "vue-wysiwyg": "^1.7.2",
    "vuex": "^3.1.0",
    "weekstart": "^1.0.0",
    "whatwg-fetch": "^2.0.4",
    "wkhtmltopdf": "^0.3.4"
  }
}

I think it might have something to do with a specific version of a dependency. But nothing I've been trying from other stack overflow threads or Google searches has been helping

Let me know if there's any code missing that may help

Upvotes: 32

Answers (7)

trusktr

Reputation: 45504

If your project worked before, but then a subsequent install caused errors, another thing you can try instead of upgrading vue-template-compiler is to pin the vue build dependency versions in your package.json by using exact version numbers in dependencies or devDependencies, and in overrides to force sub-dependencies to their minimum specific versions where they were surely known to work.

Upvotes: 0

user16249416

Reputation:

Try this:

npm remove vue-template-compiler

npm remove vue

then

npm install [email protected]

npm install [email protected]

This will match the version of vue and vue-template compiler on your project.

Upvotes: 18

Ian Samz

Reputation: 2129

For yarn:

yarn remove vue vue-template-compiler
yarn add vue vue-template-compiler

yarn upgrade seemed to have errors.

Upvotes: 2

Luc Constantin

Reputation: 51

I had the same issue and I ran the command: npm update vue-template-compiler. All solved.

Upvotes: 5

magentaqin

Reputation: 2149

The version of "vue-template-compiler" should match the version of "vue". If the dependency is declared as:

"vue": "^2.6.11"

Npm will possibly install [email protected], which is mismatched with the version of "vue-template-compiler". As of what updates between 2.6.11 and 2.6.12, you can refer to the release notes.

Upvotes: 12