tRPC Client webpack error

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.
Mugetsu
Mugetsu524d ago
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>({})
Alex / KATT 🐱
Alex / KATT 🐱523d ago
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?
julius
julius523d ago
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?
Alex / KATT 🐱
Alex / KATT 🐱523d ago
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
julius
julius523d ago
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?
Alex / KATT 🐱
Alex / KATT 🐱523d ago
i'm having a play with it now...
julius
julius523d ago
cool, im still fighting with my bloody matrix.........
Alex / KATT 🐱
Alex / KATT 🐱523d ago
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?
Stack Overflow
Webpack cant compile ts 3.7 (Optional Chaining, Nullish Coalescing)
I try to use typescript 3.7 features like Optional Chaining, Nullish Coalescing. But webpack gives me an error while transpaling. app: Module parse failed: Unexpected token (50:40) app: File was
Alex / KATT 🐱
Alex / KATT 🐱523d ago
GitHub
feat: add @babel/runtime for client packages · Issue #3393 · trpc...
Describe the feature you&#39;d like to request Currently, we don&#39;t do any transpilation outside of what&#39;s in tsconfig, which leads to limited browser support, even in compiled o...
Mugetsu
Mugetsu523d ago
@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.
Alex / KATT 🐱
Alex / KATT 🐱523d ago
if it's a monorepo, this might come that you have multiple versions of tanstack query installed
Mugetsu
Mugetsu523d ago
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?
Alex / KATT 🐱
Alex / KATT 🐱523d ago
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?
Mugetsu
Mugetsu523d ago
I've checked that and It doesn't seem this is the issue
Mugetsu
Mugetsu523d ago
Dunno what I miss here... QueryClientProvider is there why it complains for god sake 😭
Alex / KATT 🐱
Alex / KATT 🐱523d ago
does it complain when you add a query or mutation?
Mugetsu
Mugetsu523d ago
query havent checked mutation
sachin
sachin523d ago
we purposefully transpile to whatever node 14 supports (I think es2020)
Mugetsu
Mugetsu523d ago
@alex / KATT This solved the problem. But why I would need to do this ?? https://github.com/TanStack/query/discussions/4619
sachin
sachin523d ago
we can lower that target if you want @alex / KATT
Alex / KATT 🐱
Alex / KATT 🐱523d ago
if tsconfig is enough, that's great, i played around briefly yday and couldn't get tsconfig to transpile optional chains
Alex / KATT 🐱
Alex / KATT 🐱523d ago
are you sure you don't have several react-query in node_modules?
sachin
sachin523d ago
I think there's a way to set it so it uses the tsconfig target
Mugetsu
Mugetsu523d ago
Im pretty sure. How I verify that?
Mugetsu
Mugetsu523d ago
I guess this should be okay? Having two react-query. One from tanstack and second from trpc ??
sachin
sachin523d ago
@Mugetsuis it a must for you to be on webpack 4 (i.e. it's too hard to move off of it)?
Alex / KATT 🐱
Alex / KATT 🐱522d ago
That looks fine
Mugetsu
Mugetsu522d ago
@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
Alex / KATT 🐱
Alex / KATT 🐱522d ago
great!!
Hussam
Hussam500d ago
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';
julius
julius500d ago
Advanced Features: Next.js Compiler | Next.js
Learn about the Next.js Compiler, written in Rust, which transforms and minifies your Next.js application.
Hussam
Hussam500d ago
got it thanks.
More Posts
cookies, headers and authenticationin express I can do something like `res.cookie("name", "value")` for example. alternatively I can dremove queryis there any api on the trpc client to instantly remove the query out of the query cache? Basicallytrpc 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 anyCannot find namespace 'trpc'I'm getting this error when trying to access <trpc.Provider ...>. Any idea what might be going on?use 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 :/How can I use a fork of trpc-next?Hey there, I've made a fork of @trpc in order to fix an issue inside of @trpc/next. I can build it atrying 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