Industrial
Industrialโ€ข2y ago

Cannot read properties of undefined (reading 'createTRPCReact')

I'm trying to use it in an Astro project. https://github.com/Industrial/test-astro-solid/blob/main/src/lib/trpc.ts I think I implemented it as per the example https://trpc.io/docs/react#2-create-trpc-hooks
GitHub
test-astro-solid/trpc.ts at main ยท Industrial/test-astro-solid
Contribute to Industrial/test-astro-solid development by creating an account on GitHub.
Usage with React | tRPC
How to use and setup tRPC in React
4 Replies
backbone
backboneโ€ข2y ago
I don't know why.but please try pnpm install again or restart VSCode.
Industrial
IndustrialOPโ€ข2y ago
@backbone I did rm -rf node_modules && pnpm install and same thing @backbone could you run git clone git@github.com:Industrial/test-astro-solid.git && cd test-astro-solid && pnpm i && pnpm dev to reproduce ?
backbone
backboneโ€ข2y ago
Sorry, I would try this repo
Industrial
IndustrialOPโ€ข2y ago
Thank you ๐Ÿ™‚ I got it! I'm using SolidJS and not React so I don't need react-query.
import { createResource } from 'solid-js'
import type { JSX } from 'solid-js/jsx-runtime'

import { trpc } from '@/lib/trpc'

export const Test = (): JSX.Element => {
const userId = '123'
const [user, { mutate, refetch }] = createResource(userId, async (id: string) => {
return await trpc.getUserById.query(id)
})
return <div>USER? {JSON.stringify(user())}</div>
}
import { createResource } from 'solid-js'
import type { JSX } from 'solid-js/jsx-runtime'

import { trpc } from '@/lib/trpc'

export const Test = (): JSX.Element => {
const userId = '123'
const [user, { mutate, refetch }] = createResource(userId, async (id: string) => {
return await trpc.getUserById.query(id)
})
return <div>USER? {JSON.stringify(user())}</div>
}
That's all you need ๐Ÿ™‚

Did you find this page helpful?