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 commented 3 years ago

Describe the bug

vue add apollo fails with an error.

To Reproduce Steps to reproduce the behavior:

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

Error message

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

yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.1: The platform "linux" is incompatible with this module.
info "fsevents@2.3.1" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" 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
└─ vue-cli-plugin-apollo@0.22.2
info All dependencies
└─ vue-cli-plugin-apollo@0.22.2
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 commented 3 years ago

try yarn add -D vue-loader@next

rajinder-yadav commented 3 years ago

@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 commented 3 years ago

need help! same issue

Szymon-dziewonski commented 3 years ago

Same problem here

ballonura commented 3 years ago

Same problem here

trfi commented 3 years ago

Same issue, why not fix

kabbagepatch commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Same issue,can anyone help here?

tinutmap commented 3 years ago

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

My project uses:

vue@3.2.5
vue-cli@4.5.13
vue-apollo@4.0.0-alpha.14

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 commented 2 years ago

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

cnchampness commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

does anyone find the solution for the above issue?

ghost commented 2 years ago

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.

vuejs / apollo

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

package.json