TypeError: Cannot read property 'parseComponent' of undefined

[jbnv]

After doing npm update, my npm run dev is throwing a bunch of instances of one error:

TypeError: Cannot read property 'parseComponent' of undefined
at parse (node_modules/@vue/component-compiler-utils/dist/parse.js:14:23)
at Object.module.exports (node_modules/vue-loader/lib/index.js:67:22)
@ ./resources/js/routes/index.js 18:11-28
@ ./resources/js/sp.js
@ multi ./resources/js/sp.js

The errors are all the same except for one difference: the reference 18:11-28 for ./resources/js/routes/index.js is different for each file. It looks like each error corresponds to an () => import() statement.

I would definitely appreciate some assistance on this since it's crashing my project's entire build.

[yyx990803]

A reproduction with your package-lock.json or yarn.lock would help.

[jbnv]

I'll try at some point to shrink the entire project down to something that I can post here. In the meantime, here's the package-lock.json.

[Awea]

Hi there,

Same problem here. Here is a reproduction: https://github.com/wearemd/spa-starter/tree/renovate/sass-loader-8.x.

It happens after updating to sass-loader-8, so it's a sass-loader issue?

Sorry about that, I haven't any error.

[jbnv]

Gee thanks, I wanted to look at your reproduction to see how it compared to my code...

[jbnv]

I resolved my issue by changing the version of vue-template-compiler from ^2.6.10 to 2.6.10.

[cs09g]

It also happens when vue-template-compiler is missing.

[dev0088]

I removed package-lock.json file and node_modules directory and reinstalled npm packages. Then I resolved the issue.

$ rm package-lock.json
$ rm -rf node_modules
$ npm install
$ npm run serve

[Inchill]

I met the same problem, and here is no package-lock.json file.Does anyone know how to fix it?

[NPellet]

Personally, matching vue and vue-template-compiler versions (using vue 2.6.12 and vue-template-compiler 2.6.12) fixed the problem for me.

[HYLijing]

如何解决的？

[ycang89]

@HYLijing just make sure "vue" , "vue-template-compiler" and "vue-server-renderer" catch up to the same version of 2.6.12

[habc0807]

@dev0088 I've tried your method, but my problem still hasn't been solved.

[habc0807]

I resolved the issue.

npm uninstall @vue/component-compiler-utils
npm install --dev @vue/component-compiler-utils@3.1.2

[midnightelf]

i resolved the issue npm i @vue/compiler-sfc npm i vue-loader@^16.0.0-beta.8

[rizkhal]

@nosferatu-id its working for me, thanks!

[yujiaao]

I resolved my issue by changing the version of vue-template-compiler from ^2.6.10 to 2.6.10.

Likely there is a bug in ver 2.6.12

[Tiim]

I encountered this error when updating to vue 3.

I was able to solve it thanks to the suggestion of @nosferatu-id

npm i @vue/compiler-sfc@latest
npm i vue-loader@next

[waelio]

I met the same problem, and here is no package-lock.json file.Does anyone know how to fix it?

Are you using Yarn or NPM?

[Inchill]

I met the same problem, and here is no package-lock.json file.Does anyone know how to fix it?

Are you using Yarn or NPM?

Yes

[waelio]

I met the same problem, and here is no package-lock.json file.Does anyone know how to fix it?

Are you using Yarn or NPM?

Yes

Are you using Yarn or NPM? Your options [yarn, npm], which one is it 😉

[Inchill]

I met the same problem, and here is no package-lock.json file.Does anyone know how to fix it?

Are you using Yarn or NPM?

Yes

Are you using Yarn or NPM? Your options [yarn, npm], which one is it 😉

npm

[Kameecoding]

Had the same issue I forgot to update cli-service.

npm i -S @vue/cli-service@next

[A-Babin]

In a pretty much default CLI created project w/ Yarn, I was getting this error. I'd delete node_modules and yarn.lock and reinstall and things would work.... until I installed a new dependency.

It seems somehow Yarn was getting confused because @vue/cli-service depends on both v15 and v16 of vue-loader.

My solution ended up being to first delete node_modules/@vue/cli-service , any versions of node_modules/vue-loader, and yarn.lock. Then I installed vue-loader@^16.2.0 and upgraded @vue/cli-service, @vue/cli-plugin-babel, @vue/cli-plugin-eslint, @vue/cli-plugin-typescript, @vue/cli-plugin-unit-jest all to ^5.0.0-beta.0. Then had to bump eslint to ^7.25.0.

Edit: Every time I think I fixed things, something else breaks. This is a mess. Started with a fresh project. Eventually ran into same snags. I think installing Storybook has something to do with it? Every time I got Storybook working, vue-cli wouldn't compile. When I got vue-cli working, storybook wouldn't compile.

I think I got it working now?

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.16",
    "@storybook/addon-actions": "^6.3.0-alpha.14",
    "@storybook/addon-essentials": "^6.3.0-alpha.14",
    "@storybook/addon-links": "^6.3.0-alpha.14",
    "@storybook/vue3": "^6.3.0-alpha.14",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "^4.5.12",
    "@vue/cli-plugin-eslint": "^4.5.12",
    "@vue/cli-plugin-typescript": "^4.5.12",
    "@vue/cli-service": "^4.5.12",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.4",
    "eslint": "^6.8.0",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.0",
    "typescript": "^4.2.0",
    "vue-loader": "npm:vue-loader@^16.2.0",
    "vue-loader-v16": "npm:vue-loader@^16.2.0",
    "webpack": "4.42.0"
  }

[natehoffy]

I removed package-lock.json file and node_modules directory and reinstalled npm packages. Then I resolved the issue.

$ rm package-lock.json
$ rm -rf node_modules
$ npm install
$ npm run serve

Works for me every time! Thank you!

[kobac44]

vue-cli adding Font Awesome and receiving this message- new to the development world any help is appreciated.

Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined

"name": "drummin-swingin", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.35", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/vue-fontawesome": "^3.0.0-4", "core-js": "^3.6.5", "vue": "^3.0.11" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "^3.0.5", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-prettier": "^6.0.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^7.0.0", "prettier": "^2.2.1" } }

[jwoertink]

I just ran in to this issue too using npm 7.19.1. To "fix" it, I just installed with yarn.

npm install
npx webpack
# see error

yarn install
yarn run webpack
# no error

[way2ex]

In a pretty much default CLI created project w/ Yarn, I was getting this error. I'd delete node_modules and yarn.lock and reinstall and things would work.... until I installed a new dependency.

It seems somehow Yarn was getting confused because @vue/cli-service depends on both v15 and v16 of vue-loader.

~My solution ended up being to first delete node_modules/@vue/cli-service , any versions of node_modules/vue-loader, and yarn.lock. Then I installed vue-loader@^16.2.0 and upgraded @vue/cli-service, @vue/cli-plugin-babel, @vue/cli-plugin-eslint, @vue/cli-plugin-typescript, @vue/cli-plugin-unit-jest all to ^5.0.0-beta.0. Then had to bump eslint to ^7.25.0.~

Edit: Every time I think I fixed things, something else breaks. This is a mess. Started with a fresh project. Eventually ran into same snags. I think installing Storybook has something to do with it? Every time I got Storybook working, vue-cli wouldn't compile. When I got vue-cli working, storybook wouldn't compile.

I think I got it working now?

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.16",
    "@storybook/addon-actions": "^6.3.0-alpha.14",
    "@storybook/addon-essentials": "^6.3.0-alpha.14",
    "@storybook/addon-links": "^6.3.0-alpha.14",
    "@storybook/vue3": "^6.3.0-alpha.14",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "^4.5.12",
    "@vue/cli-plugin-eslint": "^4.5.12",
    "@vue/cli-plugin-typescript": "^4.5.12",
    "@vue/cli-service": "^4.5.12",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.4",
    "eslint": "^6.8.0",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.0",
    "typescript": "^4.2.0",
    "vue-loader": "npm:vue-loader@^16.2.0",
    "vue-loader-v16": "npm:vue-loader@^16.2.0",
    "webpack": "4.42.0"
  }

Great! Your answer is very helpful!

[brickgale]

i resolved the issue npm i @vue/compiler-sfc npm i vue-loader@^16.0.0-beta.8

i encountered this issue/error whilst trying to migrate from vue2 to vue3, updating to stable v16 and changing the import path of vue-loader (stated on it's documentation).

[HuRuilin]

The vue-template-compiler must be consistent with the version of vue

[jotapardo]

npm install vue@2.6.12 npm install vue-template-compiler@2.6.12 npm i

Same version for vue and vue-template-compiler.

[HassanElshazlyEida]

just run npm install vue-template-compiler@latest vue@latest

[StevenGrow]

I removed package-lock.json file and node_modules directory and reinstalled npm packages. Then I resolved the issue.

$ rm package-lock.json
$ rm -rf node_modules
$ npm install
$ npm run serve

Works for me. Thanks very much!