T
tRPC

tRPC Client webpack error

tRPC Client webpack error

MMugetsu12/13/2022
As soon as I add the client part to my legacy app i get an error and Can't figure out what is wrong.
Version: webpack 4.35.3
...
ERROR in ./node_modules/.pnpm/@trpc+react-query@10.5.0_d022380f8796fe4307eb66404abcd925/node_modules/@trpc/react-query/dist/createHooksInternal-808efaa7.mjs 127:13
Module parse failed: Unexpected token (127:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| path,
| input,
> opts?.trpc
| ];
| }
@ ./node_modules/.pnpm/@trpc+react-query@10.5.0_d022380f8796fe4307eb66404abcd925/node_modules/@trpc/react-query/dist/index.mjs 4:0-144 17:27-53 26:15-41 30:18-37 39:17-36
@ ./src/universal/TrpcWrapper.tsx
@ ./src/renderer.js
@ ./src/client/index.js

ERROR in ./node_modules/.pnpm/@trpc+client@10.5.0_@trpc+server@10.5.0/node_modules/@trpc/client/dist/index.js 33:24
Module parse failed: Unexpected token (33:24)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const { promise , abort } = observable.observableToPromise(req$);
| const abortablePromise = new Promise((resolve, reject)=>{
> opts.signal?.addEventListener('abort', abort);
| promise.then((envelope)=>{
| resolve(envelope.result.data);
@ ./node_modules/.pnpm/@trpc+react-query@10.5.0_d022380f8796fe4307eb66404abcd925/node_modules/@trpc/react-query/dist/index.mjs 1:0-29 1:0-29
@ ./src/universal/TrpcWrapper.tsx
@ ./src/renderer.js
@ ./src/client/index.js
ℹ 「wdm」: Failed to compile.
Version: webpack 4.35.3
...
ERROR in ./node_modules/.pnpm/@trpc+react-query@10.5.0_d022380f8796fe4307eb66404abcd925/node_modules/@trpc/react-query/dist/createHooksInternal-808efaa7.mjs 127:13
Module parse failed: Unexpected token (127:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| path,
| input,
> opts?.trpc
| ];
| }
@ ./node_modules/.pnpm/@trpc+react-query@10.5.0_d022380f8796fe4307eb66404abcd925/node_modules/@trpc/react-query/dist/index.mjs 4:0-144 17:27-53 26:15-41 30:18-37 39:17-36
@ ./src/universal/TrpcWrapper.tsx
@ ./src/renderer.js
@ ./src/client/index.js

ERROR in ./node_modules/.pnpm/@trpc+client@10.5.0_@trpc+server@10.5.0/node_modules/@trpc/client/dist/index.js 33:24
Module parse failed: Unexpected token (33:24)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const { promise , abort } = observable.observableToPromise(req$);
| const abortablePromise = new Promise((resolve, reject)=>{
> opts.signal?.addEventListener('abort', abort);
| promise.then((envelope)=>{
| resolve(envelope.result.data);
@ ./node_modules/.pnpm/@trpc+react-query@10.5.0_d022380f8796fe4307eb66404abcd925/node_modules/@trpc/react-query/dist/index.mjs 1:0-29 1:0-29
@ ./src/universal/TrpcWrapper.tsx
@ ./src/renderer.js
@ ./src/client/index.js
ℹ 「wdm」: Failed to compile.
As soon as I add the wrapper it crashes
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { httpBatchLink, loggerLink } from '@trpc/react-query'
import React, { useState } from 'react'
import superjson from 'superjson'
import { trpc } from './trpc'

const getBaseUrl = () => {
if (typeof window !== 'undefined') return '' // browser should use relative url
return `http://localhost:${process.env.PORT ?? 3000}` // dev SSR should use localhost
}

export const TrpcWrapper: React.FC = ({ children }) => {
const [queryClient] = useState(() => new QueryClient())
const [client] = useState(() =>
trpc.createClient({
transformer: superjson,
links: [
loggerLink({
enabled: (opts) =>
process.env.NODE_ENV === 'development' ||
(opts.direction === 'down' && opts.result instanceof Error),
}),
httpBatchLink({
url: `${getBaseUrl()}/trpc`,
}),
],
}),
)

// todo CONTEXT SHARING? <QueryClientProvider client={queryClient} contextSharing>
return (
<trpc.Provider client={client} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</trpc.Provider>
)
}
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { httpBatchLink, loggerLink } from '@trpc/react-query'
import React, { useState } from 'react'
import superjson from 'superjson'
import { trpc } from './trpc'

const getBaseUrl = () => {
if (typeof window !== 'undefined') return '' // browser should use relative url
return `http://localhost:${process.env.PORT ?? 3000}` // dev SSR should use localhost
}

export const TrpcWrapper: React.FC = ({ children }) => {
const [queryClient] = useState(() => new QueryClient())
const [client] = useState(() =>
trpc.createClient({
transformer: superjson,
links: [
loggerLink({
enabled: (opts) =>
process.env.NODE_ENV === 'development' ||
(opts.direction === 'down' && opts.result instanceof Error),
}),
httpBatchLink({
url: `${getBaseUrl()}/trpc`,
}),
],
}),
)

// todo CONTEXT SHARING? <QueryClientProvider client={queryClient} contextSharing>
return (
<trpc.Provider client={client} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</trpc.Provider>
)
}
// trpc.ts
import { createTRPCReact } from '@trpc/react-query'
import type { AppRouter } from '../server/trpc/router'

export const trpc = createTRPCReact<AppRouter>({})
// trpc.ts
import { createTRPCReact } from '@trpc/react-query'
import type { AppRouter } from '../server/trpc/router'

export const trpc = createTRPCReact<AppRouter>({})
AKAlex / KATT 🐱12/13/2022
hmmmmmmmmm it might be that the compiled output is too "modern"? it looks like it's complaining about that optional chaining line interesting looking at the compiled output it seems like we're not transpiling optional chaining but we are transpiling i.e. async/await (which I think is an older feature in browsers?) @julius this feels like your territory. we used to use babel for this stuff - do you think we need to do anything here? it seems like all environments are extending this tsconfig (https://github.com/trpc/trpc/blob/main/tsconfig.build.json) but i think we might need some lower compile target for browser-facing stuff?
Jjulius12/13/2022
if this is a monorepo with nextjs you should use next-transpile-packages or the experimental option in next13 https://github.com/t3-oss/create-t3-turbo/blob/20a00f1e2146a24ca3f47f7a9b2509356655abd7/apps/nextjs/next.config.mjs#L14 you get that loader error if you dont do that not sure if this is the same scenario though oh wait it complains about some file within trpc 🤔 is it the optional chaining then which doesn't work for legacy stuff? do we care about that? like isn't that pretty old stuff?
AKAlex / KATT 🐱12/13/2022
i think we should, one of the superpowers of trpc is that you can add it to legacy project and incrementally migrate https://caniuse.com/?search=Proxy https://caniuse.com/?search=nullish%20coalescing Proxy is a must for trpc to work but we should probably do something that does the nullish coalescing etc i'm perplexed that it rewrites async/await (https://caniuse.com/async-functions) but not nullish coal
Jjulius12/13/2022
we could rewrite this row to be
if (opts.signal) opts.signal.addEventListener('abort', abort);
if (opts.signal) opts.signal.addEventListener('abort', abort);
😉 https://github.com/trpc/trpc/blob/87024b2012a5cbcf593850d0323fb273a408ac46/packages/client/src/internals/TRPCClient.ts#L120 if thats the only place nullish seems to have come a tad bit later than async is it just a target in the tsconfig or do we need babel stuff?
AKAlex / KATT 🐱12/13/2022
i'm having a play with it now...
Jjulius12/13/2022
cool, im still fighting with my bloody matrix.........
AKAlex / KATT 🐱12/14/2022
seems like i can't do it easily @Mugetsu can you have a look at https://stackoverflow.com/questions/58813176/webpack-cant-compile-ts-3-7-optional-chaining-nullish-coalescing? what version of webpack/babel are you using? https://github.com/trpc/trpc/issues/3393
MMugetsu12/14/2022
@alex / KATT
"webpack": "4.35.3",
"@babel/runtime": "7.16.3",
"@babel/cli": "7.5.0",
"@babel/core": "7.5.0",
"webpack": "4.35.3",
"@babel/runtime": "7.16.3",
"@babel/cli": "7.5.0",
"@babel/core": "7.5.0",
Solution from the stackoverflow you linked didn't help. I do have already
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-optional-chaining",
In my babelrc But thanks to this link I was able to track this a bit and found this https://github.com/webpack/webpack/issues/10227 Which worked. I've added this to package.json and webpack compiled successfully.
"pnpm": {
"overrides": {
"acorn": "npm:acorn@8.8.1"
}
},
"pnpm": {
"overrides": {
"acorn": "npm:acorn@8.8.1"
}
},
Now I have a different problem as when I want to use the query it complains >QueryClientProvider.js:58 Uncaught Error: No QueryClient set, use QueryClientProvider to set one Dunno why is this happening. I've wrapped my whole app within the TrpcWrapper from above https://discord.com/channels/867764511159091230/1052253855884263484/1052254812185563166 and it still complain.
AKAlex / KATT 🐱12/14/2022
if it's a monorepo, this might come that you have multiple versions of tanstack query installed
MMugetsu12/14/2022
I had tanstack query installed prior trpc. But I dont see why it would happen? I installed fresh newest version of tanstack. I expect that this would run two separate instances of ReactQuery and work? My raw reactquery works but trpc complains.
import { Provider } from 'react-redux'
import { Router, RouterContext } from 'react-router'
import { renderToString } from 'react-dom/server'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { TrpcWrapper } from './universal/TrpcWrapper'

const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
staleTime: 5 * 1000, // seconds
useErrorBoundary: true,
},
},
})

export const renderServer = (store, props, sheet) => {
const RootComponent = ( // eslint-disable-line no-extra-parens
<Provider store={store}>
<TrpcWrapper>
<QueryClientProvider client={queryClient}>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<RouterContext {...props} />
</QueryClientProvider>
</TrpcWrapper>
</Provider>
)

return renderToString(sheet.collectStyles(RootComponent))
}

export const renderClient = (store, routes, history) => {
const RootComponent = ( // eslint-disable-line no-extra-parens
<Provider store={store}>
<TrpcWrapper>
<QueryClientProvider client={queryClient}>
<Router history={history} routes={routes} />
<ReactQueryDevtools />
</QueryClientProvider>
</TrpcWrapper>
</Provider>
)

return ReactDOM.render(RootComponent, document.getElementById('main')) // eslint-disable-line react/no-render-return-value
}
import { Provider } from 'react-redux'
import { Router, RouterContext } from 'react-router'
import { renderToString } from 'react-dom/server'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { TrpcWrapper } from './universal/TrpcWrapper'

const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
staleTime: 5 * 1000, // seconds
useErrorBoundary: true,
},
},
})

export const renderServer = (store, props, sheet) => {
const RootComponent = ( // eslint-disable-line no-extra-parens
<Provider store={store}>
<TrpcWrapper>
<QueryClientProvider client={queryClient}>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<RouterContext {...props} />
</QueryClientProvider>
</TrpcWrapper>
</Provider>
)

return renderToString(sheet.collectStyles(RootComponent))
}

export const renderClient = (store, routes, history) => {
const RootComponent = ( // eslint-disable-line no-extra-parens
<Provider store={store}>
<TrpcWrapper>
<QueryClientProvider client={queryClient}>
<Router history={history} routes={routes} />
<ReactQueryDevtools />
</QueryClientProvider>
</TrpcWrapper>
</Provider>
)

return ReactDOM.render(RootComponent, document.getElementById('main')) // eslint-disable-line react/no-render-return-value
}
I've tried clean setup with trpc with commits before I introduced raw tanstack query and its the same behaviour. No QueryClient set, use QueryClientProvider to set one @alex / KATT is there anything more you could recommend I could check what could be the issue here?
AKAlex / KATT 🐱12/14/2022
I think it is that you need to have the QueryClientProvider further up the tree than the trpc initialization hmm nooo, that can't be it well in the code above you have two query client providers, it might be that?
MMugetsu12/14/2022
I've checked that and It doesn't seem this is the issue
MMugetsu12/14/2022
Dunno what I miss here... QueryClientProvider is there why it complains for god sake 😭
AKAlex / KATT 🐱12/14/2022
does it complain when you add a query or mutation?
MMugetsu12/14/2022
query havent checked mutation
Ssachin12/14/2022
we purposefully transpile to whatever node 14 supports (I think es2020)
MMugetsu12/14/2022
@alex / KATT This solved the problem. But why I would need to do this ?? https://github.com/TanStack/query/discussions/4619
Ssachin12/14/2022
we can lower that target if you want @alex / KATT
AKAlex / KATT 🐱12/14/2022
if tsconfig is enough, that's great, i played around briefly yday and couldn't get tsconfig to transpile optional chains
AKAlex / KATT 🐱12/14/2022
are you sure you don't have several react-query in node_modules?
Ssachin12/14/2022
I think there's a way to set it so it uses the tsconfig target
MMugetsu12/14/2022
Im pretty sure. How I verify that?
MMugetsu12/14/2022
I guess this should be okay? Having two react-query. One from tanstack and second from trpc ??
Ssachin12/14/2022
@Mugetsuis it a must for you to be on webpack 4 (i.e. it's too hard to move off of it)?
AKAlex / KATT 🐱12/14/2022
That looks fine
MMugetsu12/15/2022
@sachin I tried but the dependency chain in this legacy app (more than 3 yrs oldd) is a nightmare and overwhelm me with upgrade try. I might try again. But Anyway i was able to successfuly run trpc with the found workarounds
AKAlex / KATT 🐱12/15/2022
great!!
HHussam1/6/2023
Hey, can you say me more about this. I am running into this problem , I'm using turborepo with next13
../../packages/trpc/utils/trpc.ts
Module parse failed: Unexpected token (3:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

> import type { AppRouter } from '../server/routers/_app';
../../packages/trpc/utils/trpc.ts
Module parse failed: Unexpected token (3:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

> import type { AppRouter } from '../server/routers/_app';
HHussam1/6/2023
got it thanks.

Looking for more? Join the community!

T
tRPC

tRPC Client webpack error

Join Server
Recommended Posts
cookies, headers and authenticationin express I can do something like `res.cookie("name", "value")` for example. alternatively I can dtrpc hook pattern. This works, but I’m not convinced…I want to call my route when a button is clicked and have access to isLoading, onError etc… I have iCatch TRPCError, ZoddError on the front-endi am throwing a TRPCError in a mutation. i dont understand how to catch this error in the OnError meimplicitly has type 'any' because it does not have a type annotation and is referenced directlyRunning into this error. I feel like it's some sort of infinite recursion issue, but not sure where Why do some examples create PrismaClient in context, and others don’tIs there a specific reason to do this or not to do this? I can imagine with the new Prisma extensionAppRouter type any?I am trying to use trpc in a Turbo repo and when I export the AppRouter on the server side it is thez.map() as an inputHi, I have ```ts z.map(z.string(), z.string()) ``` as an input, but when I try to pass the map as correct way to call TRPC inside a functioni want a user to be able to sign after they have a clicked a button but i get a hooks error. can anyuse tRPC for RPC calls instead of gRPCHi, I know that tRPC and gRPC are different things - despite the similar name. Nevertheless I woutRPC caching vs Vercel dynamic edge cachingWhat is the difference, or improvements, on Vercel's dynamic edge caching? tRPC server caching worksIgnore Errors from batch callsI have some of my routers throw helpful errors for the client to use in the error message object, buAny way to view headers in middleware?Middleware `input` doesn't seem to have it :/trying to cache api routesHello. I am using TRPC to make a site which integrates with a third party API. I need to add cachinPrisma+TRPC monorepoHey, so we have a monorepo with 3 backend services and 3 frontend services. It looks like the followcalling api endpoints from within a trpc api endpoint?Hey all. I have a series of api endpoints which may have to be reused across other api endpoints. ITRPC waiting until the query has completedHey. I've just found out about TRPC and I love it. However, I was wondering if there is a way to maktrpc with headless cmsHello, Is there any example with trpc and headless CMS or is there anypoint to use trpc for project Is it possible to call a query from another query defined in the same router?Say I have some code like the following: ``` t.router({ compute_all: t.procedure .query(Testing with React Testing LibraryHi! I am trying to test my ```DestinationForm``` component using react testing library. My test is sProxy TRPC server to another clientI've two TRPC servers, one essentially acts like a proxy, it validates auth and based on a specific