CODEWITHSUNDEEP
react-nativeexpoapollo-client
JeremyKirkham
JeremyKirkham

Reputation: 1077

Unable to resolve "./rules/FieldsOnCorrectType" from "node_modules/graphql/validation/index.js"

I'm building a react native application with apollo client 3, and keep getting the following error when generating the javascript bundle.

Failed building JavaScript bundle.
Unable to resolve "./rules/FieldsOnCorrectType" from "node_modules/graphql/validation/index.js"

My code is pretty simple, this is App.tsx:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'localhost:4000/graphql',
  cache: new InMemoryCache()
});

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <ApolloProvider client={client}>
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
      </ApolloProvider>
    );
  }
}

I've tracked it down to the instantiation of the new ApolloClient object - commenting out those lines (and the provider) causes the error to disappear.

Renaming node_modules/graphql/validation/rules/FieldsOnCorrectTypeRule.js to node_modules/graphql/validation/rules/FieldsOnCorrectType.js (dropping the Rule suffix of filename) fixes that specific error, but then errors on the next import in the validation/index.js file... I don't understand why.

Upvotes: 1

Views: 576

Answers (1)

Ed Byne
Ed Byne

Reputation: 11

I had the same problem with a react native app after upgrading to apollo client 3. For me it was a react native caching issue and the problem went away after following these instructions to clear the cache: How to clear react-native cache?.

I am using the react native cli and used these commands (I didn't check if all of them are actually necessary):

watchman watch-del-all
rm -rf /tmp/metro-cache
rm -rf node_modules
npm cache clean --force
npm install
npm start -- --reset-cache

If you are using the expo cli then apparently you can just do this:

expo start -c

Upvotes: 1

Related Questions