Encountered an ERROR when attempting to deploy a next.js app to Azure Static Webapp using GitHub actions for

Question

Encountered an ERROR when attempting to deploy a next.js app to Azure Static Webapp using GitHub actions for

I am encountering an issue that is causing some frustration. The problem only arises during my github actions build. Interestingly, when I run the build locally, everything works perfectly and I can access the route handler without any issues. However, even when I try to simulate the github action locally using act and Docker, I still face the same error.

Here's the error message:

TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:405:5)
    at new URL (node:internal/url:676:13)
    at new ni (/home/runner/work/frontend/.next/server/app/api/reports/route.js:6:40210)

The problematic file is src/app/api/reports/route.tsx:

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);  // <- here is the problem
  const id = searchParams.get('id');
  const partitionKey = searchParams.get('partitionKey');

  if (!id || !partitionKey) {
    return NextResponse.json({msg: 'Success'});
  }

I expect the build to be successful so I can access:

http://localhost:3000/api/reports?id=SOME_ID&partitionKey=SOME_KEY

However, I am getting the error mentioned above during the build process itself, not even during runtime.

Interestingly, the mentioned URL works fine when tested locally.

I have tried several solutions, such as:

Changing the filename to route-bad.tsx, which surprisingly allowed the build to succeed
Removing the URL parsing, resulting in a successful build
Using an alternate method for URL parsing with the qs library, but still facing the same error

I would greatly appreciate any assistance on this matter!

typescript next.js github-actions azure-static-web-app

Answer 1

Answer №1

Properly including the URL in various formats is essential. Make sure to start with URL://www, followed by Www.skaj.dom, and include HTTP://www, etc.

Answer 2

Properly including the URL in various formats is essential. Make sure to start with URL://www, followed by Www.skaj.dom, and include HTTP://www, etc.

Answer 3

Answer №2

After some detective work, I finally cracked the code. This insightful discussion nudged me in the right direction: https://github.com/vercel/next.js/discussions/35534

It turns out that what seemed like a major clue was actually just a distraction:

const { searchParams } = new URL(request.url);  // <- here is the problem

The real culprit resided here:

const cosmosClient = new CosmosClient({
  endpoint: COSMOS_ENDPOINT,
  key: COSMOS_KEY,
});
export async function GET(request: Request) {
  ...
}

Two issues were conspiring against me:

The initialization of the CosmosClient was happening outside of the function call, causing it to execute prematurely and trigger errors during compilation. I remedied this by moving the initialization inside the function.
The mishap occurred because the environment variables weren't properly set during the build phase within GitHub actions. They were only set later during deployment. A helpful insight on setting environment variables during builds on GitHub action can be found in this answer.

With these two corrections implemented, the error vanished. It was a challenging puzzle, but it certainly enhanced my understanding of React compilation.

Answer 4

After some detective work, I finally cracked the code. This insightful discussion nudged me in the right direction: https://github.com/vercel/next.js/discussions/35534

It turns out that what seemed like a major clue was actually just a distraction:

const { searchParams } = new URL(request.url);  // <- here is the problem

The real culprit resided here:

const cosmosClient = new CosmosClient({
  endpoint: COSMOS_ENDPOINT,
  key: COSMOS_KEY,
});
export async function GET(request: Request) {
  ...
}

Two issues were conspiring against me:

The initialization of the CosmosClient was happening outside of the function call, causing it to execute prematurely and trigger errors during compilation. I remedied this by moving the initialization inside the function.
The mishap occurred because the environment variables weren't properly set during the build phase within GitHub actions. They were only set later during deployment. A helpful insight on setting environment variables during builds on GitHub action can be found in this answer.

With these two corrections implemented, the error vanished. It was a challenging puzzle, but it certainly enhanced my understanding of React compilation.

Encountered an ERROR when attempting to deploy a next.js app to Azure Static Webapp using GitHub actions for

Answer №1

Answer №2

Similar questions

Storing TypeScript functions as object properties within Angular 6

Arranging Data in AngularJS based on Selected Filter Criteria

Navigating through the concept of passing objects by reference in child components of Angular 2+

Issues with the inheritance functionality in styled components are causing errors

Why can't Angular iterate through objects using ngFor in Typescript?

Creating Multiple Choice Forms in React: A Guide to Implementing Conversational Form

Tips on obtaining the current date format (e.g. dd/mm/yyyy or mm/dd/yyyy) on the client side

Creating a factory function in TypeScript to generate union types

The Unusual Behavior of Typescript Partial Interfaces

Prevent redirection when submitting and show an error message instead

Creating personalized hooks that rely on React query requests

Obtaining Data from a Database Using Angular

Customize the appearance of the Material UI expansion panel when it is in its expanded

Determining the type of a single deconstructed variable from an object

Is it beneficial to disable and deactivate Validators in Angular?

essential elements for mapping an array using typescript

I'm having trouble configuring the header in my Node/Express route

What is the best way to outline the specifications for a component?

Retrieve a specific subdirectory from the bundle

What is the best way to organize the Firebase data that is stored under the user's unique