[bug]: Uncaught ReferenceError: React is not defined at AppKit [Expo Web]

[Akanimorex]

Description

This error comes up when I try to Integrate Wallet connect with Appkit.

import {createAppKit, defaultWagmiConfig, AppKit } from '@reown/appkit-wagmi-react-native';

• createAppKit works (i could import it alone and it doesn't throw any error)

• Once i import Appkit, AppkitButton, anything that requires AppKit, throws the error and doesn't render the components anymore

AppKit SDK version

1.0.1 ,1.0.2

Output of npx react-native info

System:
OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
Memory: 5.26 GB / 31.16 GB
Shell:
version: 5.2.21
path: /bin/bash
Binaries:
Node:
version: 20.18.0
path: ~/.nvm/versions/node/v20.18.0/bin/node
Yarn: Not Found
npm:
version: 10.8.2
path: ~/.nvm/versions/node/v20.18.0/bin/npm
Watchman: Not Found
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: Not Found
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.74.5
wanted: 0.74.5
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

info React Native v0.76.3 is now available (your project is running on v0.74.5).

Expo Version (if applies)

6.3.12

Steps to reproduce

• Clone the repo,

• head to apps/mobile

• run pnpm install

• then run pnpm run dev

• Head to apps/mobile/src/app/EVMProvider.tsx

• try to wrap the app with AppKit

import {createAppKit, defaultWagmiConfig, AppKit } from '@reown/appkit-wagmi-react-native';

• refresh the dapp and check

Snack, code example, screenshot, or link to a repository

https://github.com/Akanimorex/afk_monorepo

[MSghais]

Gm @ignaciosantise, can you check this issue please?
Maybe looks a pnpm Turborepo related issues like the #251

[ignaciosantise]

Hey 👋 This doesn't seem related to the issue linked. It seems related to tsconfig/babel setup. @Akanimorex is it reproducible in a brand new project?

[Akanimorex]

I dont think so. Following the react-native sample projects, it works.

[ignaciosantise]

@Akanimorex Can you check your babel config file? and check this solution:
facebook/react-native#34351 (comment)

[Akanimorex]

Okay, I'll look at it

[maaft]

Having the same issue with expo / react native:

import { ReactNode } from "react";

import "@walletconnect/react-native-compat";
import { WagmiProvider } from "wagmi";
import { mainnet, polygon, arbitrum } from "@wagmi/core/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
  createAppKit,
  defaultWagmiConfig,
  AppKit,
} from "@reown/appkit-wagmi-react-native";

// // 0. Setup queryClient
const queryClient = new QueryClient();

// // 1. Get projectId at https://cloud.reown.com
const projectId = "YOUR_PROJECT_ID";

// // 2. Create config
const metadata = {
  name: "AppKit RN",
  description: "AppKit RN Example",
  url: "https://reown.com/appkit",
  icons: ["https://avatars.githubusercontent.com/u/179229932"],
  redirect: {
    native: "YOUR_APP_SCHEME://",
    universal: "YOUR_APP_UNIVERSAL_LINK.com",
  },
};

const chains = [mainnet, polygon, arbitrum] as const;

const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });

// 3. Create modal
createAppKit({
  projectId,
  wagmiConfig,
  defaultChain: mainnet, // Optional
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
});

type Props = {
  children: ReactNode;
};

export default function Web3Provider({ children }: Props) {
  return (
    <>
      <WagmiProvider config={wagmiConfig}>
        <QueryClientProvider client={queryClient}>
          {children}
          {/* <AppKit /> */}
        </QueryClientProvider>
      </WagmiProvider>
    </>
  );
}

as soon as i use the <AppKit /> component, I get the "React is not defined" error.

has anyone succeeded in finding a solution?

[Akanimorex]

@ignaciosantise same error here from above.
The recommendation didn't work though after I tried it

[ignaciosantise]

@Akanimorex can you try changing this line https://github.com/Akanimorex/afk_monorepo/blob/eb11d1416f14d236deb39ebafbba58223efebb56/apps/mobile/tsconfig.json#L26 to "module": "ESNext" ? Or remove the line.

Also, can you check replacing "jsx": "react-native", with "jsx": "react-jsx" ?

Im pretty sure the issue is on your tsconfig/babel config, we need to find where

[Kroustof]

Same issue here with AppKit or AppKitButton components. The problem only occurs with Expo Web. There is no issue using Expo Go. Looking into Appkit components, they all missing React import, highlited with typescript errors ("'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.")

[Kroustof]

@Akanimorex can you try changing this line https://github.com/Akanimorex/afk_monorepo/blob/eb11d1416f14d236deb39ebafbba58223efebb56/apps/mobile/tsconfig.json#L26 to "module": "ESNext" ? Or remove the line.

Also, can you check replacing "jsx": "react-native", with "jsx": "react-jsx" ?

Im pretty sure the issue is on your tsconfig/babel config, we need to find where

I applied it but it still not working.

I tried to implement appKit from scratch and with templates and I always end up with the same error no Expo Web platform.

We need a fix... thanks

[ignaciosantise]

@Kroustof this SDK is not meant to be used in a web project, but did you try adding import React from 'react'; in your root file?

Also, this app works in expo web without issues -> https://github.com/reown-com/appkit-react-native/tree/develop/apps/native can you compare your tsconfig and babel files to see if there's something different?

[maaft]

I'll try out the linked app this weekend.

BUT: This bug is reproducible on a fresh expo project:

1. npx create-expo-app@latest Project
2. cd Project
3. install and use appkit
4. --> error: "React is not defined"

IMHO with a default-setting expo project, AppKit should be working from the get go.

Or there should be clear instructions what we need to change, to use AppKit with expo.

[ignaciosantise]

@maaft is your error also happening on web?

AppKit works well on a fresh project with Expo on mobile

[Kroustof]

It works perfectly with Expo on mobile. The problem occurs only with Expo web.

I guessed that appkit worked only with mobile, but as I use Vercel for my backend, I need to deploy my Expo project to Vercel and with that error on the web side the builds failed everytime. I temporarily added a boundary error that give me just a blank page for the web part but it is not ideal.

[Kroustof]

I'll try out the linked app this weekend.

BUT: This bug is reproducible on a fresh expo project:

1. npx create-expo-app@latest Project

2. cd Project

3. install and use appkit

4. --> error: "React is not defined"

IMHO with a default-setting expo project, AppKit should be working from the get go.

Or there should be clear instructions what we need to change, to use AppKit with expo.

@ignaciosantise If you could try to deploy a fresh expo project and make it work with the right settings/fix, that is all we need for now :-)

[ignaciosantise]

hey @Kroustof i've been doing some tests and i think it could be related to the lib i use to build the SDK (react-native-builder-bob). I don't have the time now to keep testing, and as we don't plan to support web on this SDK, it will probably take some time to get to this again.

The starting point is to update react-native-builder-bob to the latest version, build and check how it behaves on web. I couldn't make it work, so im not sure if i need to add some extra config for web. Feel free to test and open a PR if you make it work 🙏