From 5ebcf73fa233b55ed89398d1489058d9879f83de Mon Sep 17 00:00:00 2001 From: alessia Date: Tue, 4 Apr 2023 16:25:28 -0400 Subject: [PATCH 1/3] chore: add Troubleshooting section to React Native docs --- docs/source/integrations/react-native.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/source/integrations/react-native.md b/docs/source/integrations/react-native.md index 627f73b1adb..bc3dacde749 100644 --- a/docs/source/integrations/react-native.md +++ b/docs/source/integrations/react-native.md @@ -43,3 +43,21 @@ For more information on setting up Apollo Client, see [Getting started](../get-s 1. Install React Native Debugger and open it. 2. Enable "Debug JS Remotely" in your app. 3. If you don't see the Developer Tools panel or the Apollo tab is missing from it, toggle the Developer Tools by right-clicking anywhere and selecting **Toggle Developer Tools**. + +## Troubleshooting + +Here are a few common React Native problems and solutions. + +* `Uncaught Error: Cannot read property 'prototype' of undefined`, or similar Metro build error -- This is due to the way [the Metro bundler supports `.cjs` and `.mjs` files](https://github.com/facebook/metro/issues/535#issuecomment-1198071838): it requires additional configuration to _implicitly_ resolve files with these extensions, so `import { ApolloClient, InMemoryCache } from '@apollo/client` will result in an error. You can amend your import statement to e.g. `import { ApolloClient, InMemoryCache } from '@apollo/client/main.cjs';`, or you can install `@expo/metro-config` and configure their implicit resolution via `metro.config.js` in the root of your project: + +```js +const { getDefaultConfig } = require('@expo/metro-config'); + +const config = getDefaultConfig(__dirname); + +config.resolver.sourceExts.push( + 'cjs' +); + +module.exports = config; +``` From f602e4aa8c465552e5f5d52285dbdafd33d4b790 Mon Sep 17 00:00:00 2001 From: alessia Date: Wed, 5 Apr 2023 09:53:43 -0400 Subject: [PATCH 2/3] move explanation into separate paragraph --- docs/source/integrations/react-native.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/source/integrations/react-native.md b/docs/source/integrations/react-native.md index bc3dacde749..6264a1137c5 100644 --- a/docs/source/integrations/react-native.md +++ b/docs/source/integrations/react-native.md @@ -46,9 +46,9 @@ For more information on setting up Apollo Client, see [Getting started](../get-s ## Troubleshooting -Here are a few common React Native problems and solutions. +* `Uncaught Error: Cannot read property 'prototype' of undefined`, or similar Metro build error when importing from `@apollo/client` -* `Uncaught Error: Cannot read property 'prototype' of undefined`, or similar Metro build error -- This is due to the way [the Metro bundler supports `.cjs` and `.mjs` files](https://github.com/facebook/metro/issues/535#issuecomment-1198071838): it requires additional configuration to _implicitly_ resolve files with these extensions, so `import { ApolloClient, InMemoryCache } from '@apollo/client` will result in an error. You can amend your import statement to e.g. `import { ApolloClient, InMemoryCache } from '@apollo/client/main.cjs';`, or you can install `@expo/metro-config` and configure their implicit resolution via `metro.config.js` in the root of your project: +This is due to the way [the Metro bundler supports `.cjs` and `.mjs` files](https://github.com/facebook/metro/issues/535#issuecomment-1198071838): it requires additional configuration to _implicitly_ resolve files with these extensions, so `import { ApolloClient, InMemoryCache } from '@apollo/client` will result in an error. You can amend your import statement to e.g. `import { ApolloClient, InMemoryCache } from '@apollo/client/main.cjs';`, or you can install `@expo/metro-config` and configure their implicit resolution via `metro.config.js` in the root of your project: ```js const { getDefaultConfig } = require('@expo/metro-config'); From 292016b716575cccc5951a8cd1fe6cf87ce9383d Mon Sep 17 00:00:00 2001 From: alessia Date: Wed, 5 Apr 2023 10:00:18 -0400 Subject: [PATCH 3/3] fix typo --- docs/source/integrations/react-native.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/source/integrations/react-native.md b/docs/source/integrations/react-native.md index 6264a1137c5..da976e00675 100644 --- a/docs/source/integrations/react-native.md +++ b/docs/source/integrations/react-native.md @@ -48,9 +48,9 @@ For more information on setting up Apollo Client, see [Getting started](../get-s * `Uncaught Error: Cannot read property 'prototype' of undefined`, or similar Metro build error when importing from `@apollo/client` -This is due to the way [the Metro bundler supports `.cjs` and `.mjs` files](https://github.com/facebook/metro/issues/535#issuecomment-1198071838): it requires additional configuration to _implicitly_ resolve files with these extensions, so `import { ApolloClient, InMemoryCache } from '@apollo/client` will result in an error. You can amend your import statement to e.g. `import { ApolloClient, InMemoryCache } from '@apollo/client/main.cjs';`, or you can install `@expo/metro-config` and configure their implicit resolution via `metro.config.js` in the root of your project: +This is due to the way [the Metro bundler supports `.cjs` and `.mjs` files](https://github.com/facebook/metro/issues/535#issuecomment-1198071838): it requires additional configuration to _implicitly_ resolve files with these extensions, so `import { ApolloClient, InMemoryCache } from '@apollo/client'` will result in an error. You can amend your import statement to e.g. `import { ApolloClient, InMemoryCache } from '@apollo/client/main.cjs'`, or you can install `@expo/metro-config` and configure their implicit resolution via `metro.config.js` in the root of your project: -```js +```js title="metro.config.js" const { getDefaultConfig } = require('@expo/metro-config'); const config = getDefaultConfig(__dirname);