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.

33 Replies

MugetsuOP•2y 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 🐱•2y 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•2y 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 🐱•2y 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•2y 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 🐱•2y ago

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

julius•2y ago

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

Alex / KATT 🐱•2y 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 🐱•2y ago

https://github.com/trpc/trpc/issues/3393

GitHub

feat: add @babel/runtime for client packages · Issue #3393 · trpc...

Describe the feature you'd like to request Currently, we don't do any transpilation outside of what's in tsconfig, which leads to limited browser support, even in compiled o...

MugetsuOP•2y 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 🐱•2y ago

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

MugetsuOP•2y 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 🐱•2y 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?

MugetsuOP•2y ago

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

MugetsuOP•2y ago

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

Alex / KATT 🐱•2y ago

does it complain when you add a query or mutation?

MugetsuOP•2y ago

query havent checked mutation

sachin•2y ago

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

MugetsuOP•2y ago

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

sachin•2y ago

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

Alex / KATT 🐱•2y ago

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

sachin•2y ago

https://github.com/trpc/trpc/blob/f9472653c7c532720e6b778b7c86508bd22ed01f/scripts/getRollupConfig.ts#L84

Alex / KATT 🐱•2y ago

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

sachin•2y ago

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

MugetsuOP•2y ago

Im pretty sure. How I verify that?

MugetsuOP•2y ago

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

sachin•2y 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 🐱•2y ago

That looks fine

MugetsuOP•2y 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 🐱•2y ago

great!!

Hussam•2y 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•2y ago

https://nextjs.org/docs/advanced-features/compiler#module-transpilation

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•2y ago

got it thanks.