Apollo-client: Unable to import in create-react-app (v3 beta)

Created on 22 Apr 2020  路  4Comments  路  Source: apollographql/apollo-client

Intended outcome:

Installing and setting up @apollo/client in a Create-React-App app using this documentation on Node 12.16.2 and 10.20.1

Actual outcome:

Failed to compile.

./node_modules/graphql-tag/src/index.js
Module not found: Can't resolve 'graphql/language/parser' in '/Users/<USER>/craa/node_modules/graphql-tag/src'

Not able to go on further.

How to reproduce the issue:

Set up the project

From your local environment:

npx create-react-app craa
cd craa && npm i @apollo/client

Add client, and rewrite App

// client.js
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'http://localhost:4000'
  }),
})


export default client;
// App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { ApolloProvider } from "@apollo/client";
import client from './client'

function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <h1>hello world</h1>
      </div>
    </ApolloProvider>
  );
}

Start up the react app,

Versions

(I attempted with both Erbium and Dubnium, latest)

System:
OS: macOS 10.15.4
Binaries:
Node: 10.20.1 - ~/.asdf/installs/nodejs/10.20.1/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.11.3 - ~/.asdf/installs/nodejs/10.20.1/bin/npm
Browsers:
Chrome: 81.0.4044.113
Firefox: 75.0
Safari: 13.1
npmPackages:
@apollo/client: ^3.0.0-beta.43 => 3.0.0-beta.43
-->

Most helpful comment

@brianbancroft try running

npm i graphql

this fixed it for me

All 4 comments

This happened to me as well.

Did you find a way to resolve this? Should we just manually add the graphql-tag dependency for now?

@brianbancroft try running

npm i graphql

this fixed it for me

As mentioned in https://github.com/apollographql/apollo-client/issues/6180#issuecomment-630550827, installing graphql is the solution. We'll make sure our getting started docs are updated to mention that graphql is required. Thanks!

Was this page helpful?
0 / 5 - 0 ratings