Vue 3 - Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.

[rajinder-yadav]

Describe the bug

vue add apollo fails with an error.

To Reproduce Steps to reproduce the behavior:

1. create a simple app using vue 3 CLI
2. cd into project folder
3. type "vue add apollo"
4. See error

Error message

📦  Installing vue-cli-plugin-apollo...

yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
Done in 3.86s.
✔  Successfully installed plugin: vue-cli-plugin-apollo

? Add example code No
? Add a GraphQL API Server? No
? Configure Apollo Engine? No

🚀  Invoking generator for vue-cli-plugin-apollo...
 ERROR  Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (/home/yadav/.nvm/versions/node/v12.19.0/lib/node_modules/@vue/cli/node_modules/jscodeshift/src/Collection.js:213:13)
    at injectOptions (/home/yadav/.nvm/versions/node/v12.19.0/lib/node_modules/@vue/cli/lib/util/codemods/injectOptions.js:15:6)
    at runTransformation (/home/yadav/.nvm/versions/node/v12.19.0/lib/node_modules/@vue/cli/node_modules/vue-codemod/dist/src/run-transformation.js:61:17)
    at /home/yadav/.nvm/versions/node/v12.19.0/lib/node_modules/@vue/cli/lib/Generator.js:290:23
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (/home/yadav/.nvm/versions/node/v12.19.0/lib/node_modules/@vue/cli/lib/Generator.js:276:24)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Generator.generate (/home/yadav/.nvm/versions/node/v12.19.0/lib/node_modules/@vue/cli/lib/Generator.js:175:5)
    at async runGenerator (/home/yadav/.nvm/versions/node/v12.19.0/lib/node_modules/@vue/cli/lib/invoke.js:111:3)
    at async invoke (/home/yadav/.nvm/versions/node/v12.19.0/lib/node_modules/@vue/cli/lib/invoke.js:92:3)

Versions vue: @vue/cli 4.5.10 "vue-cli-plugin-apollo": "~0.22.2",

Additional context Add any other context about the problem here.

package.json

{
  "name": "vue-ql",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "prettier": "^1.19.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-apollo": "~0.22.2",
    "vue-jest": "^5.0.0-0"
  }
}

[julientechdev]

try yarn add -D vue-loader@next

[rajinder-yadav]

@avrelaun That fixed one problem, at least I a new module installed:

"vue-cli-plugin-apollo": "~0.22.2",

However I don't see @apollo/client installed, which is what I expect.

Also I don't see any of the files generated and I still need to do those steps manually? I would expect the same behavior as with Angular for ng add apollo-angular?

This is still broken imho.

[mogocat]

need help! same issue

[Szymon-dziewonski]

Same problem here

[ballonura]

Same problem here

[trfi]

Same issue, why not fix

[kabbagepatch]

For people having this issue, this seems to have worked, at least to run vue add apollo https://github.com/vuetifyjs/vue-cli-plugins/issues/140#issuecomment-670971894 Doesn't seem like it's the real solution; not sure where that needs to happen yet, here or in Vue. But it's a temporary fix at least

[MSM74588]

the same issue for me also. Files are not automatically added and had to add them manually but still was not working.(Using the vue add method)

this is the issue while running npm run serve after running vue add apollo {which failed} **ERROR** Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.

Update: failed on Ubuntu also.

Update: My Cli version is 4 so I think that is why it is not working since it is designed for cli 3

[apoorvclp]

Same issue,can anyone help here?

[tinutmap]

I believe vue add apollo does not work well with Vue 3.

My project uses:

[email protected]
[email protected]
[email protected]

I stumbled upon that rabbit hole and how I got over:

• Delete project folder previously created by vue-cli and recreate it by vue-cli. Please backup first and proceed at your discretion.

• Use manual installation route instead: npm install --save graphql graphql-tag @apollo/client

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'

// HTTP connection to the API
const httpLink = createHttpLink({
  // You should use an absolute URL here
  uri: 'http://localhost:3020/graphql',
})

// Cache implementation
const cache = new InMemoryCache()

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

Depending on your preference [Option API, Composition API, Component API], follow their setup

[CChampness]

On Windows 10, I am having the exact same problem as the original post.

[cnchampness]

Precisely same issue: @vue/cli 5.0.4 "vue": "^3.2.13" "vue-cli-plugin-apollo": "~0.22." Invoking generator for vue-cli-plugin-apollo... ERROR Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists. /* sigh */

[lucaspmarra]

Same error... fresh vite install with vue3

? Add example code Yes
? Add a GraphQL API Server? No
? Configure Apollo Engine? No

🚀  Invoking generator for vue-cli-plugin-apollo...
 ERROR  Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (C:\Users\xd1a2\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\jscodeshift\src\Collection.js:213:13)
    at injectOptions (C:\Users\xd1a2\AppData\Roaming\npm\node_modules\@vue\cli\lib\util\codemods\injectOptions.js:15:6)
    at runTransformation (C:\Users\xd1a2\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\vue-codemod\dist\src\runTransformation.js:60:17)
    at C:\Users\xd1a2\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:335:23
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (C:\Users\xd1a2\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:321:24)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Generator.generate (C:\Users\xd1a2\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:205:5)
    at async runGenerator (C:\Users\xd1a2\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:111:3)
    at async invoke (C:\Users\xd1a2\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:92:3)

[raoasifraza11]

does anyone find the solution for the above issue?

[ghost]

For people having this issue, this seems to have worked, at least to run vue add apollo vuetifyjs/vue-cli-plugins#140 (comment) Doesn't seem like it's the real solution; not sure where that needs to happen yet, here or in Vue. But it's a temporary fix at least

To those still asking for solutions, the above tip by kavisherlock does indeed work.

Don't install the Apollo example files if you're on Vue 3, installation will fail due to slot-scope depreciation.