bug: TRPCClientError: Invalid URL

[michealroberts]

Describe the bug

So since upgrading to the latest trpc version, it seems that this library fails, although I believe the issue is not with the library per se.

[cause]: TypeError: Invalid URL
      at new NodeError (node:internal/errors:393:5)
      at URL.onParseError (node:internal/url:565:9)
      at new URL (node:internal/url:645:5)
      at new URL (node:internal/url:642:22)
      at FetchInterceptor.<anonymous> (/Users/michael/Developer/observerly/observerly/node_modules/.pnpm/@mswjs+interceptors@0.17.9/node_modules/@mswjs/interceptors/src/interceptors/fetch/index.ts:51:26)
      at step (/Users/michael/Developer/observerly/observerly/node_modules/.pnpm/@mswjs+interceptors@0.17.9/node_modules/@mswjs/interceptors/lib/interceptors/fetch/index.js:59:23)
      at Object.next (/Users/michael/Developer/observerly/observerly/node_modules/.pnpm/@mswjs+interceptors@0.17.9/node_modules/@mswjs/interceptors/lib/interceptors/fetch/index.js:40:53)
      at fulfilled (/Users/michael/Developer/observerly/observerly/node_modules/.pnpm/@mswjs+interceptors@0.17.9/node_modules/@mswjs/interceptors/lib/interceptors/fetch/index.js:31:58)
      at processTicksAndRejections (node:internal/process/task_queues:95:5) {
    input: 'null',
    code: 'ERR_INVALID_URL'
  }

To Reproduce

Install tRPC: v10.34.0 or higher
Setup tropic-msw
See error being thrown ...

Expected behavior

Prior to this, version 10.32.0 of @trpc/* packages worked well with msw-trpc, with no issue. However, since upgrading @trpc to the latest versions ^10.34 I have seen this error.

Versions
typescript: v5.1.3
tRPC: v10.36.0
msw: v1.2.3

[michealroberts]

Hi @maloguertin ... could we brainstorm some solutions to this issue please 🙏

[flacial]

Hi @maloguertin ... could we brainstorm some solutions to this issue please 🙏

Hey there! You found any solution for this issue?

[alex-way]

I managed to resolve this issue, but ran into another. Effectively the workaround is to set the trpc base url to be an arbitrary value. e.g. http://testhost.local/api/trpc and then use the same value in your MSW mocks:

// utils/trpc.ts
import { httpBatchLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import type { AppRouter } from "@server/trpc/routers/_app";

function getBaseUrl() {
	if (process.env.NODE_ENV === "test") return "http://localhost:3000";
	if (typeof window !== "undefined") return "";

	if (process.env.NEXTAUTH_URL) return process.env.NEXTAUTH_URL;

	return `https://localhost:${process.env.PORT ?? 5001}`;
}

export const trpc = createTRPCNext<AppRouter>({
	config(opts) {
		return {
			links: [
				httpBatchLink({
					url: `${getBaseUrl()}/api/internal`,
				}),
			],
		};
	},
	ssr: false,
});

// test.ts
const server = setupServer(
	rest.get("http://localhost:3000/api/trpc/getData", (req, res, ctx) => {
		return res(ctx.json([]));
	}),
);

However, now I get another error:

RPCClientError: Missing result
    at Function.from (file:///C:/code/cloud-management-platform-2/src/cmp-web-ui/node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:37:16)
    at file:///C:/code/cloud-management-platform-2/src/cmp-web-ui/node_modules/@trpc/client/dist/httpBatchLink-204206a5.mjs:200:56
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at processTimers (node:internal/timers:514:7) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  [cause]: Error: Missing result
      at file:///C:/code/cloud-management-platform-2/src/cmp-web-ui/node_modules/@trpc/client/dist/httpBatchLink-204206a5.mjs:88:35
      at runNextTicks (node:internal/process/task_queues:60:5)
      at listOnTimeout (node:internal/timers:540:9)
      at processTimers (node:internal/timers:514:7)
}

Which I'm not sure what the issue is, but may be related to some kind've polyfilling, or requests firing before MSW can register. Not really sure though.

[alex-way]

Wait a second, I think the above error may be related to the response back from trpc being different than that of the call signature:

This is returned:

[
    {
        "result": {
            "data": [
                {
                    "accountId": "538704730908"
                }
            ]
        }
    }
]

Whereas I expected:

 [
      {
          "accountId": "12314"
      }
  ]

[alex-way]

That's done the trick. Will write up a helper function in the morning and provide the solution here

[michealroberts]

@alex-way Weirdly, today updating to al of the latest versions - the error has passed. So @trpc version 10.42.0 seems to be the version to aim for?

[alex-way]

@michealroberts Interesting, I can't see anything in the diff between 10.41.0 and 10.42.0 of trpc which would suggest this to be resolved. But I'll try updating later today and see if I get the same 😄

[AlexJWayne]

Upon upgrading from Node 16 to Node 18, i started to get a related error in my tests:

TRPCClientError: Failed to parse URL from /api/trpc/projectRoles.all

The fix was to change the tRPC endpoint in my tRPC client for my react web application from:

const url = '/api/trpc'

to

const url = `${window.location.protocol}//${window.location.host}/api/trpc`

Which should basically be the same thing anyway.

[maloguertin]

Is this resolved for you guys?

[michealroberts]

@maloguertin Yeh for me, this has been resolved, although ... looking at the API for msw version 2, we might need to expose some extras for forward and backward compatibility.