[Expo] Cannot find '../package.json'

[ghost]

Not sure if this is a bug or misconfiguration with my current loader / typescript configurations, But I get the following error every time I try to integrate stripe.

Module not found: Can't resolve '../../package.json' in '/Users/.../client/src/node_modules/@stripe/stripe-react-native/lib/module/components

Here's my tsconfig, webpack config and babel config respectively

{
  "extends": "expo/tsconfig.base",
  "esModuleInterop": true,
  "compilerOptions": {
    "strict": true,
    "jsx": "react",
  },
  "resolveJsonModule": true,
}

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const path = require('path')

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync(env, argv);
    config.module.rules.forEach(r => {
        if (r.oneOf) {
            r.oneOf.forEach(o => {
                if (o.use && o.use.loader && o.use.loader.includes('babel-loader')) {
                    o.include = [
                        path.resolve('.'),
                        path.resolve('node_modules/@ui-kitten/components'),
                    ]
                }
            })
        }
    })
    return config;
};

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

[ghost]

Hmmm... Think this may be more of a fundamental problem with either the documentation/package itself.

I started a new expo TS project and tried to integrate it. No cigar.

I created a repo to replicate the error. You can find it here.

https://github.com/ljc-codes/stripe-react-native-expo

Looking forward to the response.

[thorsten-stripe]

Your repo is working fine for me on both a physical iOS device (Expo Go client v2.19.6):

and on the Android simulator:

Can you try updating your expo clients and see if that resolves it? #3 (comment)

[ghost]

@ljc-codes Try manually removing your node_modules folder and then run npm install.

[ghost]

Ah Interesting. Thanks guys this is helpful. It seems to work when I use an ios emulator aswell. apologies, was testing things out in the expo: web view.

Cheers!

[thorsten-stripe]

React Native for Web is currently not supported

[hierror]

React Native for Web is currently not supported

Hi, @thorsten-stripe. Is there an estimate for support React Native for Web?

[thorsten-stripe]

Currently no plans. You would have to implement with Stripe Elements separately for the web platform target.

[ChronSyn]

I understand it doesn't work on web, and I don't have a problem with that. I know that there's a whole lot of considerations you have to make for a lib like this.

However, some teams are targeting both Web and Native with react-native and Expo. To support this, we're using both the stripe-react-native lib, and stripe-js + react-stripe-js and building different components for each platform.

The issue I'm seeing is that no matter what I try, it is still unable to resolve the package.json mentioned in this issue.

I've tried:

• Dynamic conditional imports
• Excluding with webpack (maybe my syntax was wrong)
• Platform-specific file extensions (i.e. .native.tsx, .web.tsx, etc)

Dynamic import, for example:

const PlatformSpecificComponentImporter = (async () => {
  if (Platform.OS === "web") {
    const { default: result } = await import("./path/to/web/component");
    return result;
  } else {
    const { default: result } = await import("./path/to/native/component");
    return result;
  }
})();

In every single case, it is still trying to resolve the stripe-react-native library, and causing a crash during web-compile (i.e. before launching the project in the browser) because it can't resolve the specific file.

It's the only library I've ever seen this happen with. I know this may not be a bug specific to the library itself, but I feel most people are likely to head here to look for a solution.

Can anyone shed some light on a solution? Is there something I can add to my webpack.config.js to exclude the native library? Have I not correctly configured the dynamic import?

Minor update (23:13 - 08 June 2021):

I already tried using .native.tsx and .tsx filenames for my components for native and web respectively, and that didn't work (yes, I did clear the cache). Now, it's started working.

With that said, I would still like to see some fallback in the library to prevent this issue from happening if possible.

[thorsten-stripe]

@ChronSyn did you see https://github.com/stripe/stripe-react-native#requirements

The SDK uses TypeScript features available in Babel version 7.9.0 and above. Alternatively use the plugin-transform-typescript plugin in your project.

Any chance that helps resolve your errors?

[rissois]

How to avoid this error:

1. Search for @stripe/stripe-react-native
2. Duplicate any file that contains import { } from '@stripe/stripe-react-native
3. Rename these new files blank.js > blank.web.js (https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions)
4. Comment out or replace any Stripe-React-Native code