reactjsvuejs3vite

@apollo_client.js?v=dbeae2a1:78 Uncaught Error: Could not resolve "react" imported by "rehackt". Is it installed?


While using apollo client in vite, I get the error @apollo_client.js?v=dbeae2a1:78 Uncaught Error: Could not resolve "react" imported by "rehackt". Is it installed? in the console even though I want the library without react (vanilla javascript)? I imported ApolloClient from @apollo/client/core My main.js:

//src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { ApolloClient, gql, createHttpLink, InMemoryCache } from '@apollo/client/core';
import { DefaultApolloClient } from '@vue/apollo-composable';
import { createRouter, createWebHashHistory } from 'vue-router';
import Post from '@/components/Post.vue';
import Author from '@/components/Author.vue';
import PostsByTag from '@/components/PostsByTag.vue';
import AllPosts from '@/components/AllPosts.vue';

const httpLink = createHttpLink({
    uri: 'https://localhost:8000/graphql',
});

const apolloClient = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
});
const routes = [
  { path: '/author/:username', component: Author },
  { path: '/post/:slug', component: Post },
  { path: '/tag/:tag', component: PostsByTag },
  { path: '/', component: AllPosts },
];
const router = createRouter({
    history: createWebHashHistory(),
    routes: routes,
});

const app = createApp(App);

app.provide(DefaultApolloClient, apolloClient);

app.mount('#app');

Solution

  • According to this article, many dependencies can be imported from @apollo/client:

    -import ApolloClient from 'apollo-client'
    -import { ApolloLink, concat } from 'apollo-link'
    -import { HttpLink } from 'apollo-link-http'
    -import { split } from 'apollo-link'
    -import { onError } from 'apollo-link-error'
    -import { InMemoryCache, defaultDataIdFromObject } from 'apollo-cache-inmemory'
    +import { ApolloClient } from '@apollo/client/core'
    +import { ApolloLink, HttpLink, split, concat } from '@apollo/client/core'
    +import { onError } from '@apollo/client/link/error'
    +import { InMemoryCache, defaultDataIdFromObject } from '@apollo/client/cache'
    -import gql from "graphql-tag"
    +import { gql } from "@apollo/client/core"