TRPCClientError: Unexpected non-whitespace character - NextJS 14 App router

[copyPasteNinja]

Technical Details

• OS: [e.g. MacOS]
• Terraform Version: v1.5.7
• Provider Version: ~> 5.0
• Module Version: 2.0.2
• Module Affected: tf-aws-open-next-zone
• Deployment Model: Single zone

Describe the bug

This issue i'm facing came out of nowhere, I honestly don't know if this is opennext or terraform issue either, I've opened a issue with TRPC as well. (Its worth mentioning I don't have this issue locally and community, trpc, varcel repos didn't have any resolved or pre-existing issues). So I'm thinking maybe there is something I'm missing on infra level. Essentially I get this error when I request something from backend upon inspecting on the browser:

Error fetching statement data: TRPCClientError: Unexpected non-whitespace character after JSON at position 1

The underlying functions and data fetching all is working as expected no issues except when it gets to frontend. When inspected, the payload looks fine in proper json format but response and preview has an unexpected numerical values invalidating json:

5 da{
    "0": {
        "result": {
            "data": {
                "json": {
                    "url": "https://test-bucket.s3.us-east-1.amazonaws.com"
                }
            }
        }
    }0

This issue didn't exist before the new year. This effected my entire application not just the last few features I've been working on. I attempted reverting back to last working state which the issue persisted. Upgraded my lambda runtime from 18 to 20 which didn't seem to fix the issue.

Logs

I can log the results of backend functions in the cloudwatch logs, but when it gets to frontend there is something is disturbing the data, after looking through community and issues form TRPC official I didn't see any issues relating to the problem i'm having.

Additional context

Add any other context about the problem here.

[RJPearson94]

Hi @copyPasteNinja,

Sorry you have run into this issue.

Have there been changes to the next.js or opennext versions that are being used between the new year and now? Are you using the experiment rust bundler (turbopack) for next.js I wonder if this is an issue with bundling/minifying the function code.

Is the website code public, or can I use a similar template to try replicate this issue?

Kind Regards Rob

[RJPearson94]

Looking through some of the dependent repos

Nextjs (v14.0.4) was released on 7th Dec 23 OpenNext (v2.3.4) was released on the 5th Jan 24. Prior version (v2.3.3) was released on 29th Nov 23 trpc (v10.45.0) was released on the 26th Dec 23. Prior version (v10.44.1) was released on 23rd Nov 23

So I'm not sure when this last worked for you, but the opennext or trpc version may have changed, which could have introduced this issue. It might be worth pinning these dependencies to the version prior to the holidays and see if you get the same issue

Kind Regards Rob

[copyPasteNinja]

Thank you for the fast reply, much appreciated it 🙇‍♂️

I double checked every commit that was published and the only change in versioning I found was prisma which I attempted using previous version without fulfilling result. But you were right my pipeline had switched to latest open-next version, but upon attempting to building with previously used version of open-next it didn't seem fix the issue, the problem persisted. Just to be sure I'm currently taking down my infra and redeploying. I'll keep you updated.

But speaking of minifying, I did get some errors earlier today about minifying build which provided me this link: https://legacy.reactjs.org/docs/error-decoder.html/?invariant=423 - I'm not sure if that is related although I don't see this error now.

Thank you for your attention, any other discoveries I make, I'll be sure to share.

this is my next.config.js:

await import("./src/env.js");

/** @type {import("next").NextConfig} */
const config = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

export default config;

[copyPasteNinja]

I found a some lead to this issue: https://discord.com/channels/966627436387266600/1186241634329952338 I don't think this discord is public so I'll just paste what I found here, this person whom had same exact issue resolved by: using httpBatchStreamLink in TRPC and claimed he is using SST. His exact words: Resolved this, Solution is enabling streaming since ct3a uses the httpBatchStream link

Which I already had that configured:

  const [trpcClient] = useState(() =>
    api.createClient({
      transformer,
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          url: getUrl(),
          headers() {
            return {
              cookie: props.cookies,
              "x-trpc-source": "react",
            };
          },
        }),
      ],
    }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </QueryClientProvider>
  );
}

I also attempted deploying this app in Vercel and my initial problem did not occur: Error fetching statement data: TRPCClientError: Unexpected non-whitespace character after JSON at position 1 . This makes me think maybe its the unstable_httpBatchStreamLink I'm using for new version of NextJS. I will try downgrading next back to 13 see if that'll solve my issue.

Although I did have different issue on vercel which you mentioned earlier, Minified React Error:

Uncaught Error: Minified React error #425; visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

I'd love to get your thoughts. Thank you

[RJPearson94]

Hi @copyPasteNinja,

I did see in opennext v3, streaming seems to be easier to use. At one stage it did break due to an aws change but it looks like it may have been resolved now. I did notice this issue on open next https://github.com/sst/open-next/issues/328, which indicates streaming is needed for trpc as you mentioned

I will take a look at enabling streaming on the server function. I will try to get this patch out ASAP

Kind Regards Rob

[copyPasteNinja]

You rock @RJPearson94! Thank you!.

Replacing that unstable_httpBatchStreamLink with httpBatchLink did the trick. I had missed a crucial part in the TRPC documentation: OFFICIAL DOCS:

unstable_httpBatchStreamLink is a terminating link that batches an array of individual tRPC operations into a single HTTP request that's sent to a single tRPC procedure (equivalent to httpBatchLink), but doesn't wait for all the responses of the batch to be ready and streams the responses as soon as any data is available.

[RJPearson94]

hi @copyPasteNinja,

I'm glad you managed to resolve this. If you want to use the streaming capabilities, this is now supported as part of v2.2.0.

Kind Regards Rob

[copyPasteNinja]

You are amazing!!

[copyPasteNinja]

I did attempt to use v2.2.0 with enable_streaming = true option within server_function block with the following unexpected result 🫣, did I miss something?

The server_functions didn't have any logs other than duration info.

[RJPearson94]

Hi @copyPasteNinja,

You might need to update you build command to include the —streaming argument. See https://open-next.js.org/inner_workings/streaming for more context

[copyPasteNinja]

Thank you! But the link you provided has got a big red flag 😅. I think I'll opt out of streaming for now:

Streaming support is EXTREMELY EXPERIMENTAL... AWS has updated their runtime in the past which broke streaming... It seems stable now but if they do another rugpull, it could cause your app to break.

It's not recommended to use streaming in production.

[RJPearson94]

Hi @copyPasteNinja,

that was what I was eluding to in my earlier comment but I couldn’t find that page at the time. It looks like the maintainers have been making changes for v3 which should make this stable going forward. More info can be found at https://open-next.js.org/v3 and on the opennext discord (linked from above)

As you highlighted, it might be worth holding off using it for now. I need to look into the v3 changes and see how the module will be impacted as a result

Glad you have a fix for your issue though