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

Mugetsu•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...

Mugetsu•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

Mugetsu•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?

Mugetsu•2y ago

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

Mugetsu•2y ago

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