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"