Error with React Native: main module field does not exist

[lyqht]

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!

[Brianzchen]

I just came across this problem yesterday too! In this issue, the snippet in this exact post solved the problem.

Though later I found that react-native doesn't work with @prismicio/client because it uses URLSearchParams which has unsupported methods.
ref: https://github.com/facebook/react-native/blob/main/Libraries/Blob/URL.js#L85

I had to revert back to using https://www.npmjs.com/package/prismic-javascript which works pretty well. Actually if anyone from prismic reads this, do you plan to make prismicio/client compatible with react native?

[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: facebook/react-native#23922 (comment)

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. 🙂

[angeloashmore]

This should be fixed as of v6.1.1 (see #212). 🎉

You can install @prismicio/client without needing to modify metro.config.js.

To be clear, adding the URLSearchParams polyfill in your app is still necessary for @prismicio/client to work properly in React Native. See the above comment for instructions.

I was unable to get React Native running without Expo so I did not test it with non-Expo React Native app. If someone is able to test with vanilla React Native, I would greatly appreciate it!

I'm going to close this issue as it should be resolved, but please let me know if this is still not working and I will take another look. Thank you!

[Brianzchen]

Thanks! If not done so some details with compatibility to react native would be helpful for future users in the readme

[angeloashmore]

@Brianzchen Great suggestion. There isn't a mention in the docs right now, but I will work on getting something added.

React Native-specific installation will most likely be added to this page: https://prismic.io/docs/technical-reference/prismicio-client?version=v6

[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