Apollo-client: react` has to be installed - with VueJS

Created on 20 Jul 2020 · 12Comments · Source: apollographql/apollo-client

Hello,

Intended outcome:
Be able to use apollo-client with VueJS

Actual outcome:

This dependency was not found:

* react in ./node_modules/@apollo/client/react/context/ApolloContext.js, ./node_modules/@apollo/client/react/context/ApolloConsumer.js and 6 others

To install it, you can run: npm install --save react

How to reproduce the issue:

Use vue-cli to create a new project, install [email protected]

npm run serve

Thank you for your help.

Source

tcastelly

👍3

Most helpful comment

I later found that you can simply import from @apollo/client/core instead of @apollo/client to get reference to implementations that do not require react.

import { ApolloClient,ApolloQueryResult, InMemoryCache, NormalizedCacheObject, gql, HttpLink } from '@apollo/client/core’

https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/#using-apollo-client-without-react https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/#using-apollo-client-without-react

On Oct 14, 2020, at 5:56 PM, Tyler Collier notifications@github.com wrote:

Thanks @tcastelly https://github.com/tcastelly. I downgraded from @apollo/client 3.2.3 to apollo-client 2.6.4 (as well as apollo-cache-inmemory). Now I don't need react anymore. :-)

For others, the path from apollo-boost to apollo-client was easy. I just followed the directions at https://apollo.vuejs.org/guide/installation.html#apollo-client-full-configuration https://apollo.vuejs.org/guide/installation.html#apollo-client-full-configuration.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/apollographql/apollo-client/issues/6650#issuecomment-708681854, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHBLOK6H4SPX57GBHWXJ53SKYNBRANCNFSM4PCAQFRQ.

traviscollins on 15 Oct 2020

👍5

All 12 comments

This is a real problem for command line nodejs typescript clients. Requires a completely unnecessary set of web UI framework inclusions. The work around is "npm install --save @types/react"

traviscollins on 21 Jul 2020

Thank you very much for your help

tcastelly on 21 Jul 2020

The workaround I provided isn’t a permanent solution. There should definitely be a code change so that including react in every Project that depends on Apollo client isn’t necessary.

traviscollins on 21 Jul 2020

👍4

The workaround from @traviscollins did not work for me. I had to install react, which is definitely not what I want to do because I'm using vue-cli like the OP. Did anyone else find the same thing? Glancing at the code, react looks quite baked in. The strange thing is, I've been using apollo-boost (until today when I wanted to use https://github.com/jaydenseric/apollo-upload-client and it didn't work and I realized that apollo-boost was the culprit). apollo-boost imports from several other packages named like 'apollo-cache', etc, as opposed to @apollo/client directly. But I never got any errors about missing react dependencies. I assume it's much older. But still, no react requirement. So currently my choices seem to be 1) Use apollo-boost, uploads don't work, 2) Use @apollo/client, must include react in my Vue project.

I tried using @apollo/client 3.1.5 and 3.2.3.

@tcastelly did installing @react/types solve your problem? Otherwise I think we should reopen this issue.

tylercollier on 12 Oct 2020

Hi @tylercollier I don't need to install react. I give you my package.json:

{
"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.15.1",
    "@fortawesome/free-regular-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/vue-fontawesome": "^2.0.0",
    "@tazdev/vue-widgets": "^1.18.4",
    "@vue/apollo-composable": "^4.0.0-alpha.10",
    "@vue/composition-api": "0.6.7",
    "apexcharts": "^3.22.0",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-upload-client": "^14.1.2",
    "graphql": "^15.3.0",
    "graphql-tag": "^2.11.0",
    "vue": "^2.6.12",
    "vue-apexcharts": "^1.6.0",
    "vue-apollo": "^3.0.4",
    "vue-router": "^3.4.6",
    "vuetify": "^2.3.13"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
    "@babel/preset-flow": "^7.10.4",
    "@vue/babel-preset-jsx": "^1.1.2",
    "@vue/cli-plugin-babel": "^4.5.7",
    "@vue/cli-plugin-eslint": "^4.5.7",
    "@vue/cli-plugin-unit-jest": "^4.5.7",
    "@vue/cli-service": "^4.5.7",
    "@vue/eslint-config-airbnb": "^5.1.0",
    "@vue/test-utils": "^1.1.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "eslint": "^7.11.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-flowtype-errors": "^4.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-vue": "^7.0.1",
    "flow-bin": "^0.133.0",
    "flow-detect": "^1.0.2",
    "flow-typed": "^3.2.1",
    "sass": "^1.27.0",
    "sass-loader": "^10.0.3",
    "vue-cli-plugin-vuetify": "^2.0.7",
    "vue-template-compiler": "^2.6.12"
  }
}

tcastelly on 13 Oct 2020

I had this problem when using the [email protected]. So, I did the downgrade to 1.4.1 version and the problem gone.

darleikroth on 13 Oct 2020

Thanks @tcastelly. I downgraded from @apollo/client 3.2.3 to apollo-client 2.6.4 (as well as apollo-cache-inmemory). Now I don't need react anymore. :-)

For others, the path from apollo-boost to apollo-client was easy. I just followed the directions at https://apollo.vuejs.org/guide/installation.html#apollo-client-full-configuration.

tylercollier on 14 Oct 2020

I later found that you can simply import from @apollo/client/core instead of @apollo/client to get reference to implementations that do not require react.

import { ApolloClient,ApolloQueryResult, InMemoryCache, NormalizedCacheObject, gql, HttpLink } from '@apollo/client/core’

On Oct 14, 2020, at 5:56 PM, Tyler Collier notifications@github.com wrote:

Thanks @tcastelly https://github.com/tcastelly. I downgraded from @apollo/client 3.2.3 to apollo-client 2.6.4 (as well as apollo-cache-inmemory). Now I don't need react anymore. :-)

For others, the path from apollo-boost to apollo-client was easy. I just followed the directions at https://apollo.vuejs.org/guide/installation.html#apollo-client-full-configuration https://apollo.vuejs.org/guide/installation.html#apollo-client-full-configuration.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/apollographql/apollo-client/issues/6650#issuecomment-708681854, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHBLOK6H4SPX57GBHWXJ53SKYNBRANCNFSM4PCAQFRQ.

traviscollins on 15 Oct 2020

👍5

From the docs https://v4.apollo.vuejs.org/guide/installation.html#manual-installation just import from @apollo/client/core as @traviscollins says. It's work for me too :)

trykers on 9 Nov 2020

🎉2

I am using vite + vue3 and get this error:
Error: [vite]: Rollup failed to resolve import "react" from "node_modules/@apollo/client/react/context/ApolloConsumer.js".

Causing me some headaches now unfortunately.

Also https://github.com/apollographql/apollo-client/issues/6650#issuecomment-661583049 and https://github.com/apollographql/apollo-client/issues/6650#issuecomment-708687197 are not working in this case.

Forces me to ditch apollo for now.

janhaa on 14 Jan 2021

👍2

Same problem as @janhaa here

leonardoks16 on 15 Jan 2021

I am using vite + vue3 and get this error:
Error: [vite]: Rollup failed to resolve import "react" from "node_modules/@apollo/client/react/context/ApolloConsumer.js".

Causing me some headaches now unfortunately.

Also #6650 (comment) and #6650 (comment) are not working in this case.

Forces me to ditch apollo for now.

I got vire working with apollo client and VueApolloComposables.
My vite config looks like :

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '^/api': {
        target: 'https://localhost:5001'
      },
      '^/graphql': {
        target: 'https://localhost:5001'
      }
    }
  },
  optimizeDeps: {
    include: [
      '@apollo/client/core',
      '@apollo/client/cache',
      '@apollo/client/link/ws',
      '@apollo/client/link/context',
      '@apollo/client/utilities'
    ],
    exclude: ['@vue/apollo-composable']
  },
  build: {
    outDir: '../SmartHub.Api/wwwroot',
    rollupOptions: {
      external: ['react', 'subscriptions-transport-ws', '@vue/apollo-composable']
    }
  }
});

And my package.json

{
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vuedx-typecheck . && vite build"
  },
  "dependencies": {
    "@apollo/client": "^3.3.7",
    "@vue/apollo-composable": "^4.0.0-alpha.12",
    "@vueuse/core": "^4.0.2",
    "chart.js": "^2.9.4",
    "graphql": "^15.4.0",
    "graphql-tag": "^2.11.0",
    "jwt-decode": "^3.1.2",
    "vue": "^3.0.5",
    "vue-router": "^4.0.0-rc.6",
    "vuex": "^4.0.0-rc.2"
  },
  "devDependencies": {
    "vite": "^2.0.0-beta.12",
    "@vitejs/plugin-vue": "^1.0.4",
    "@vuedx/typecheck": "^0.4.1",
    "@vuedx/typescript-plugin-vue": "^0.4.1",
    "@typescript-eslint/eslint-plugin": "^4.9.0",
    "@typescript-eslint/parser": "^4.9.0",
    "@vue/compiler-sfc": "^3.0.4",
    "@vue/eslint-config-airbnb": "^5.1.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^7.15.0",
    "eslint-plugin-prettier": "^3.2.0",
    "eslint-plugin-vue": "^7.2.0",
    "node-sass": "^5.0.0",
    "prettier": "^2.2.1",
    "sass-loader": "^10.1.0",
    "typescript": "^4.1.2",
  }
}