Khaled Maher
Khaled Maher•5mo ago

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>
  );
}
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>();
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;
// 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();
  ...
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
}
{
  "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)
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.
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
2 Replies
Solution
Khaled Maher
Khaled Maher•5mo ago
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
jorge
jorge•4mo ago
I have this exact same issue, and I don't really understand the solution, how can I prevent the packages from being installed twice?