⚠️ Missing and/or wrong files in WalletConnect Node Packages + import React

[AnesBkdm]

Describe the bug While trying to integrate WalletConnect to an existing Expo app, crash occurs claiming React is unable to detect the different modules and dependencies inside of WalletConnect.

Additionally, when modifying the indicated @web3modal files manually, WalletConnect is unable to detect the React DOM and demands to make a manual import...

import React from "react";

... in all UI files containing a pure React call like this one...

const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(0));
  const isIos = _reactNative.Platform.OS === 'ios';

  // Fade in image on load for iOS. Android does this by default.
  const onLoadEnd = () => {
    _reactNative.Animated.timing(opacity.current, {
      toValue: 1,
      duration: 150,
      useNativeDriver: true
    }).start();
  };
  return isIos ? /*#__PURE__*/React.createElement(_reactNative.Animated.Image, _extends({
    source: {
      uri: source,
      headers
    },
    onLoadEnd: onLoadEnd,
    style: [_styles.default.image, {
      opacity: opacity.current
    }, style]
  }, rest)) : /*#__PURE__*/React.createElement(_reactNative.Image, _extends({
    source: {
      uri: source,
      headers
    },
    style: [_styles.default.image, style]
  }, rest));

Eventually, making imports (which feel very wrong) makes WalletConnect functional, but it is impossible to make a build of the Expo app for distribution (see additional details).

SDK Version (if relevant)

• Client: Expo
• Version 51

To Reproduce Simply making these imports to the App.js of an existing functional Expo app after making the WalletConnect AppKit installs.

import "@walletconnect/react-native-compat";
import { WagmiProvider } from 'wagmi'
import { mainnet, polygon, arbitrum } from '@wagmi/core/chains'
import { createWeb3Modal, defaultWagmiConfig, Web3Modal, W3mButton } from '@web3modal/wagmi-react-native'

Expected behavior The App should have no problem using WalletConnect after a fresh npx expo install described in the WalletConnect AppKit docs.

Error

None of these files exist:
  * node_modules/@web3modal/siwe-react-native/lib/src/client(.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.mjs|.native.mjs|.mjs|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.cjs|.native.cjs|.cjs|.ios.scss|.native.scss|.scss|.ios.sass|.native.sass|.sass|.ios.css|.native.css|.css|.ios.svg|.native.svg|.svg)
  * node_modules/@web3modal/siwe-react-native/lib/src/client/index(.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.mjs|.native.mjs|.mjs|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.cjs|.native.cjs|.cjs|.ios.scss|.native.scss|.scss|.ios.sass|.native.sass|.sass|.ios.css|.native.css|.css|.ios.svg|.native.svg|.svg)
  58 | });
  59 | var _utils = require("@walletconnect/utils");
> 60 | var _client = require("../src/client");
     |                        ^
  61 | var _index = require("./helpers/index");
  62 | var _SIWEController = require("./controller/SIWEController");
  63 | var _index2 = require("./scaffold/partials/w3m-connecting-siwe/index");]

Smartphone (please complete the following information):

• Device: All phones
• OS: iOS & Android
• Expo with Dev build
• Version [e.g. 22]

Additional context We cannot build the project nor submit it to the stores at all if we fix manually, Expo EAS throws a Fastlane issue everytime we try to do so.

❌  (node_modules/@web3modal/siwe-react-native/lib/commonjs/index.js:59:23)

  57 |   }
  58 | });
> 59 | var _utils = require("@walletconnect/utils");
     |                       ^ Unable to resolve module ../src/client from /Users/expo/workingdir/build/node_modules/@web3modal/siwe-react-native/lib/commonjs/index.js: 
  60 | var _client = require("../src/client");
  61 | var _index = require("./helpers/index");
  62 | var _SIWEController = require("./controller/SIWEController");

Thank you for your assistance.

[linear[bot]]

CR-497 ⚠️ Missing and/or wrong files in WalletConnect Node Packages + import React

[ignaciosantise]

Hey @AnesBkdm 👋 can you provide a MRE to reproduce the issue?

Since React 17, you no longer need to explicitly import the React module, and our packages work on Expo 51 without issues. So im not sure what's happening there 🤔 maybe there's a babel / metro config that is causing troubles.

Here's a sample expo app that works: https://github.com/WalletConnect/web3modal-react-native/tree/develop/apps/native

[linear[bot]]

APKTN-233 ⚠️ Missing and/or wrong files in WalletConnect Node Packages + import React

[ignaciosantise]

@AnesBkdm were you able to solve it? can you provide a MRE to reproduce the issue?

[ignaciosantise]

@AnesBkdm any news?

[ignaciosantise]

closing as stalled. We'll reopen if the issue persist and and Minimal Reproducible Example is provided