Error with React Native: `main` module field does not exist

Versions

"dependencies": {
    "react": "17.0.2",
    "react-native": "0.66.4",
    "@prismicio/client": "^6.1.0",
}

node: v16.10.0

Reproduction

Here’s a sample repository if you would like to replicate the problem.

Problem

Got the following error

error: Error: While trying to resolve module `@prismicio/client` from file `/Users/lyqht/self-study/real-dev-squad/SenchaTea/src/prismic.ts`, the package `/Users/lyqht/self-study/real-dev-squad/SenchaTea/node_modules/@prismicio/client/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/lyqht/self-study/real-dev-squad/SenchaTea/node_modules/@prismicio/client/dist/index.cjs`. Indeed, none of these files exist:

  * /Users/lyqht/self-study/real-dev-squad/SenchaTea/node_modules/@prismicio/client/dist/index.cjs(.native|.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json)
  * /Users/lyqht/self-study/real-dev-squad/SenchaTea/node_modules/@prismicio/client/dist/index.cjs/index(.native|.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json)
    at DependencyGraph.resolveDependency (/Users/lyqht/self-study/real-dev-squad/SenchaTea/node_modules/metro/src/node-haste/DependencyGraph.js:311:17)
    at Object.resolve (/Users/lyqht/self-study/real-dev-squad/SenchaTea/node_modules/metro/src/lib/transformHelpers.js:129:24)
    at resolve (/Users/lyqht/self-study/real-dev-squad/SenchaTea/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
    at /Users/lyqht/self-study/real-dev-squad/SenchaTea/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (/Users/lyqht/self-study/real-dev-squad/SenchaTea/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
    at processModule (/Users/lyqht/self-study/real-dev-squad/SenchaTea/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async addDependency (/Users/lyqht/self-study/real-dev-squad/SenchaTea/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
    at async Promise.all (index 6)

I have tried modifying the metro.config.js by following the StackOverflow Thread

module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false,
            },
        }),
    },
    resolver: {
        sourceExts: ["jsx", "js", "ts", "tsx"], //add here
    },
};

but I’m still encountering the same error. I’ve looked at the the closest issue on the deprecated repository but it’s not the same problem.

Any help will be appreciated!

[angeloashmore]

Just following up - A note has been added to the docs specifically regarding React Native setup.

https://prismic.io/docs/technical-reference/prismicio-client?version=v6#installation

[angeloashmore]

Hi @lyqht and @Brianzchen, thanks for reporting this (and posting a solution @Brianzchen). I work at Prismic and maintain this library.

@prismicio/client is intended to work with all modern JavaScript projects through general Web APIs, React Native included.

It’s unfortunate that URLSearchParams is not fully supported in React Native since it is used heavily in the library to build the Prismic API URLs. For web and Node.js usage, using the native URLSearchParams is preferred over a third-party search params library to minimize the bundle size.

While I don’t see @prismicio/client providing a React Native-specific version (for example, through @prismicio/client/react-native), we can still find ways to make using it easier.

Specifically regarding the URLSearchParams limitation, a polyfill can be added to your app:

1. Install the polyfill: npm install react-native-url-polyfill
2. Import it in your index.js:

   import 'react-native-url-polyfill/auto';
   

Source: https://github.com/facebook/react-native/issues/23922#issuecomment-648096619

Regarding .cjs file extension support in React Native, it seems we can fix this by using a react-native property in package.json that points to a .js file. I will investigate this and get back to you. If you have any insight, please feel free to share. 🙂