The "main" bundle of v4 is in AMD format

[cletter7]

Describe the bug
The "main" bundle of v4 is in AMD format. Is it intended? It used to be commonjs, and it seems it was changed in cfbb9da.

So now bundle contains code like:

define("useApolloClient", ["require", "exports", "vue-demi"], function (require, exports, vue_demi_1) {

And I keep getting ReferenceError: define is not defined. I am using webpack 4 to build my app.

Expected behavior
The bundle should be in commonjs format.

Versions
apollo-client: 4.0.0-alpha.12

Additional context
If this was intended, can you please explain the reasons behind this decision?

[Akryum]

Webpack should use the ESM version. 🤷

[cletter7]

On the server bundle it tries to use the one from "main" in package.json, which is AMD. Before it was working with commonjs.

[jsbroks]

@Akryum Same issue here. After upgrading to alpha-12 I am getting the same error in my nuxtjs application.

I fixed it by downgrading to alpha-10:

yarn add @vue/[email protected]

alpha-11 gave me the same issue

[devCrossNet]

Hey @Akryum,
thanks for the great work!
Do you know a workaround? I need a version above alpha.10 because I have to use multiple apollo-clients and I am a little bit in a hurry 😭

[TheJoeSchr]

I get the same error using this with nuxt & typescript.

I just was trying to do import DefaultApolloClient symbol:

import { DefaultApolloClient } from "@vue/apollo-composable";

This is definitely suddenly broken. Is there any reason for the switch to "amd"?

Nuxt version:

    "nuxt": "2.14.7",

[TheJoeSchr]

@devCrossNet

Do you know a workaround? I need a version above alpha.10 because I have to use multiple apollo-clients and I am a little bit in a hurry

I cloned the branch in #1089 and then yarn pack it as tarball which I added to my git for now

how to build workspace package

cd packages/vue-apollo-composable
yarn build
yarn pack
mv vue-apollo-composable-v4.0.0-alpha.12.tgz $yourproject
cd $yourproject
npm install ./vue-apollo-composable-v4.0.0-alpha.12.tgz

[devCrossNet]

@JoeSchr I wasn't able to spend more time on it and decided to go back to the regular usage without the composition-api on pages where I need two clients. I am waiting for a new release of vue-apollo-composables, that hopefully will fix this issue and then do a refactoring.

[fedeee]

Same problem here folks, tried to upgrade but now jest is now throwing the error reported above:
ReferenceError: define is not defined whenever there is a component or file importing from @vue/apollo-composable.

[tcastelly]

Hello, I have the same problem. I'm using Vue 3 in ssr

[Mando75]

As a workaround, you can fix the errors in Jest by doing the following:

Change your .babelrc file to babel.config.js that module.exports = your config. (see jestjs/jest#6229 (comment))

Add the following to your Jest config:

  moduleNameMapper: {
    // Override which bundle Jest imports from
    '@vue/apollo-composable': '@vue/apollo-composable/dist/index.js',
  },
  // If you get `Unexpected token` on import/export, add this to transform the @vue/apollo-composable bundle
  transformIgnorePatterns: ['/node_modules/(?!@vue/apollo-composable).+\\.js$'], 

See jestjs/jest#6229 (comment)

[leo91000]

Is there any workarround for nuxt ?

[Kauto]

@leo91000
I found a two step solution for nuxt:

1. add the transpiling of @vue/apollo-composable to nuxt.config.js

{
....
  build: {
    transpile: [
      '@vue/apollo-composable'
    ],
   }
 }

2. import all components directly from @vue/apollo-composable/dist instead of only @vue/apollo-composable. For example:

import { useResult } from '@vue/apollo-composable/dist'

Works with the newest version. No need to revert back to alpha10.

[tcastelly]

Is there any workaround for Webpack? :)

[MisaelMa]

I changed in the tsconfig

"module": "esnext"
to
"module": "commonjs"

with that the problem was solved for me

[devCrossNet]

@JoeSchr I found a workaround: vuesion/vuesion#552.

• working example with SSR: https://github.com/vuesion/vuesion/blob/next/src/pages/example/apollo.vue
• example test: https://github.com/vuesion/vuesion/blob/next/src/pages/example/apollo.spec.ts

[stephane303]

I tried all the above solutions, none of them worked in my case. I am using Vue2, Vuetify and @vue/[email protected].
I tried to downgrade to @vue/[email protected], with no success.

[Akryum]

The build process has been changed and will be released in alpha.13