Vue3 Vue Apollo composable throws error

[xxSkyy]

FIX (working to me at least)

downgrade "@vue/apollo-composable": "^4.0.0-alpha.13" to "@vue/apollo-composable": "^4.0.0-alpha.12"

---

Describe the bug
Calling anything from "@vue/apollo-composable" throws error

 error  in ./node_modules/@vue/apollo-composable/dist/index.esm.js

Module parse failed: Unexpected token (19:103)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| var ApolloClients = Symbol("apollo-clients");
| function resolveDefaultClient(providedApolloClients, providedApolloClient) {
>   const resolvedClient = providedApolloClients ? providedApolloClients.default : providedApolloClient ?? void 0;
|   return resolvedClient;
| }

 @ ./src/main.ts 15:0-50 50:12-20
 @ multi (webpack)-dev-server/client?http://10.0.0.56:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

Issues checking in progress...
No issues found.

To Reproduce

import { createApp } from "vue"
import App from "./App.vue"
import store from "./store"

import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client/core"

import { split } from "@apollo/client/core"
import { WebSocketLink } from "@apollo/client/link/ws"
import { getMainDefinition } from "@apollo/client/utilities"
import { createApolloProvider } from "@vue/apollo-option"
import { useQuery } from "@vue/apollo-composable"

interface Definintion {
  kind: string
  operation?: string
}

const httpLink = new HttpLink({
  // You should use an absolute URL here
  uri: "http://localhost:3020/graphql",
})

// Create the subscription websocket link
const wsLink = new WebSocketLink({
  uri: "ws://localhost:3000/subscriptions",
  options: {
    reconnect: true,
  },
})

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation }: Definintion = getMainDefinition(query)
    return kind === "OperationDefinition" && operation === "subscription"
  },
  wsLink,
  httpLink
)

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

const apolloProvider = createApolloProvider({
  defaultClient: apolloClient,
})

createApp(App).use(store).use(apolloProvider).mount("#app")

console.log(useQuery)

console log are simplest repdoruction, but any useQuery or other doesn't work

Versions

    "@apollo/client": "^3.3.21",
    "@vue/apollo-composable": "^4.0.0-alpha.13",
    "@vue/apollo-option": "^4.0.0-alpha.13",
    "core-js": "^3.6.5",
    "graphql": "^15.5.1",
    "subscriptions-transport-ws": "^0.9.19",
    "vue": "^3.1.4",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"

[xxSkyy]

Fixed with downgrading @vue/apollo-composable to ^4.0.0-alpha.13 , please update docs, it's quite hard to figure all in vue apollo 4

Anyway before I close case it's only way to use apollo in both ways?

//// apollo provider
import {
  ApolloClient,
  InMemoryCache,
  HttpLink,
} from "@apollo/client/core"
import { createApolloProvider } from "@vue/apollo-option"

//...

const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache(),
})

const apolloProvider = createApolloProvider({
  defaultClient: apolloClient,
})

export { apolloProvider, apolloClient }


//// main.ts
//...
import { apolloClient, apolloProvider } from "./configuration/apollo"
//..

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
  },
  render: (h) => h(App),
})

app.use(apolloProvider)
app.mount("#app")

I mean queries in component load with Options API and use Composition API

[vladninja]

I am currently using @vue/apollo-composable ^4.0.0-alpha.12 and have the same error.
What you mean about downgrading to @xxSkyy ?
^4.0.0-alpha.13 it's the latest version of this package.

P.S I am using Vue 2 with composition API

[tobiasdiez]

I also got this after upgrading 4.0.0-alpha.12 to 4.0.0-alpha.13. Downgrading again fixed it. (Also using it with Vue 2 composition api)

[xxSkyy]

I'm on Vue 3, I had "@vue/apollo-composable": "^4.0.0-alpha.13", installed, downgraded to "@vue/apollo-composable": "^4.0.0-alpha.12", and problems disappeared.

[Akryum]

const resolvedClient = providedApolloClients ? providedApolloClients.default : providedApolloClient ?? void 0;

This is valid JS. Maybe update your tooling such as babel parser?

[vladninja]

Yeah, I am also freezing a version to "@vue/apollo-composable": "^4.0.0-alpha.12" and this issue gone.
Thanks guys!

[xxSkyy]

const resolvedClient = providedApolloClients ? providedApolloClients.default : providedApolloClient ?? void 0;

This is valid JS. Maybe update your tooling such as babel parser?

I did try it on a fresh install from vue ui as on the current project I'm upgrading to vue3. Both same error.

[Akryum]

I don't have this issue here

[xxSkyy]

I don't have this issue here

I did brew upgrade, yarn upgrade, still same error. Idk. maybe its due apple m1 chip

[tobiasdiez]

In my case, it was indeed a babel configuration issue. The nullish coalescing operator is not supported by webpack 4, so the @vue/apollo-composable module needs to be transpiled with babel before it is loaded. For Nuxt, you simply add @vue/apollo-composable to build.transpile and make sure that @babel/plugin-proposal-nullish-coalescing-operator is applied. See JabRef/JabRefOnline@0de8d3e for details. The important part is that the above babel plugin is applied, so there should be straightforward solutions for other build tools too.

[Akryum]

My link above is using webpack 4 without issue.

Note that @babel/plugin-proposal-nullish-coalescing-operator is included in @babel/preset-env so there is no need to install it (you are most probably using babel preset env already). Docs

[Akryum]

Where is the original error coming from? The babel parser? An internal webpack file? Is the stack trace in full here?

[vladninja]

@Akryum I am using @vue/cli-plugin-babel/preset

Yeah, it's a full stack trace.

It's an error from the bitbucket pipeline.

 error  in ./node_modules/@vue/apollo-composable/dist/index.esm.js
Module parse failed: Unexpected token (19:103)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| var ApolloClients = Symbol("apollo-clients");
| function resolveDefaultClient(providedApolloClients, providedApolloClient) {
>   const resolvedClient = providedApolloClients ? providedApolloClients.default : providedApolloClient ?? void 0;
|   return resolvedClient;
| }

[Akryum]

Seems like acorn is the culprit, webpack 4 is using acorn 6 and nullish coalescing operator support was added in acorn 7

[Akryum]

Will probably lower the esbuild target to what acorn 6 understands.