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.

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>
  )
}

// trpc.ts
import { createTRPCReact } from '@trpc/react-query'
import type { AppRouter } from '../server/trpc/router'

export const trpc = createTRPCReact<AppRouter>({})

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?

if this is a monorepo with nextjs you should use next-transpile-packages or the experimental option in next13

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?

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

we could rewrite this row to be

if (opts.signal) opts.signal.addEventListener('abort', abort);

😉

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?

i'm having a play with it now...

cool, im still fighting with my bloody matrix.........

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?

@alex / KATT

"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",

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"
    }
  },

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.

if it's a monorepo, this might come that you have multiple versions of tanstack query installed

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
}

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?

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?

I've checked that and It doesn't seem this is the issue

Dunno what I miss here... QueryClientProvider is there why it complains for god sake 😭

does it complain when you add a query or mutation?

query havent checked mutation

we purposefully transpile to whatever node 14 supports (I think es2020)

@alex / KATT This solved the problem. But why I would need to do this ??
https://github.com/TanStack/query/discussions/4619

we can lower that target if you want @alex / KATT

if tsconfig is enough, that's great, i played around briefly yday and couldn't get tsconfig to transpile optional chains

are you sure you don't have several react-query in node_modules?

I think there's a way to set it so it uses the tsconfig target

Im pretty sure. How I verify that?

I guess this should be okay? Having two react-query. One from tanstack and second from trpc ??

@Mugetsuis it a must for you to be on webpack 4 (i.e. it's too hard to move off of it)?

That looks fine

@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

great!!

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';

got it thanks.