Khaled MaherK
tRPC•2y ago•
4 replies
Khaled Maher

TypeError: Cannot read property 'useState' of null

I followed the documentation to use @trpc/client in react. I am using Expo React Native and Expo App Router
here is the provider

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { trpc } from "../trpc";
import { useState } from "react";
import { httpBatchLink } from "@trpc/react-query";

export function TRPCOwnProvider({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "http://localhost:3000/trpc",
          // You can pass any HTTP headers you wish here
          async headers() {
            return {
              // authorization: getAuthCookie(),
            };
          },
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
}



the trpc.ts

import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '@chatclub/backend';

export const trpc = createTRPCReact<AppRouter>();


used in app/_layout.tsx

// Import your global CSS file
import React, { useState } from "react";
import "../global.css";
import { Stack } from "expo-router/stack";
import { TRPCOwnProvider } from "$/components/TRPCOwnProvider";

const AppLayout = () => {
  return (
    <TRPCOwnProvider>
      <Stack/>
    </TRPCOwnProvider>
  )
};

export default AppLayout;


and tried to use the hooks in the homepage app/index.tsx

import * as React from "react";
import { View, ScrollView, StyleSheet, TextInput } from "react-native";
import { Appbar, Text, Button } from "react-native-paper";
import { trpc } from '../trpc';

const ChatRoomScreen = () => {
  console.log('chatroomScreen')
  const hello = trpc.hello.useQuery('Chatclub');
  const sendMessageMutation = trpc.sendMessage.useMutation();
  ...


package.json


{
  "name": "@chatclub/frontend",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "trustedDependencies": [],
  "dependencies": {
    "@tanstack/react-query": "^5.51.1",
    "@trpc/client": "^11.0.0-rc.461",
    "@trpc/react-query": "^11.0.0-rc.461",
    "ajv": "^8.13.0",
    "expo": "~51.0.8",
    "expo-build-properties": "^0.12.1",
    "expo-constants": "~16.0.1",
    "expo-dev-client": "~4.0.14",
    "expo-doctor": "^1.6.1",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.14",
    "tailwindcss": "^3.4.3"
  },
  "private": true
}


Error ->>
TypeError: Cannot read property 'useState' of null

This error is located at:
    in TRPCProvider (created by TRPCOwnProvider)
    in TRPCOwnProvider (created by AppLayout)
    in AppLayout
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by CssInterop.View)
    in CssInterop.View (created by AppContainer)
    in RCTView (created by CssInterop.View)
    in CssInterop.View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

What I am missing?

here is the complete repo
https://github.com/maxios/chatclub-monorepo
GitHub
GitHub - maxios/chatclub-monorepo
Contribute to maxios/chatclub-monorepo development by creating an account on GitHub.
GitHub - maxios/chatclub-monorepo
Solution
Downgrade to latest versions not "next" versions. But mainly the mistake was that it is a monorepo so the packages were being installed twice .. once in the package folder and one in the root and I was mixing things up
Jump to solution
Was this page helpful?