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:

  1. Changing the filename to route-bad.tsx, which surprisingly allowed the build to succeed
  2. Removing the URL parsing, resulting in a successful build
  3. 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!

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

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:

  1. 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.
  2. 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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process of converting a byte array into a blob using JavaScript specifically for Angular?

When I receive an excel file from the backend as a byte array, my goal is to convert it into a blob and then save it as a file. Below is the code snippet that demonstrates how I achieve this: this.getFile().subscribe((response) => { const byteArra ...

Error encountered when utilizing a mixin in TypeScript due to a parameter issue

Recently, I delved into learning Typescript and decided to experiment with the mixin concept. The code snippet below may seem trivial, but it's all part of the learning process. Surprisingly, everything runs smoothly except for line 42, myInput.sendKe ...

There was an issue with retrieving the image URL from the source, causing an error message to display: "

I encountered an error while trying to access my product. Here is the error message https://i.stack.imgur.com/fTmL0.png It seems that the image URL from the sanity database cannot be rendered, even though it worked fine in the tutorial I was following. I ...

What is the reason that Gatsby's arrow function is unable to access a value from props that is calculated from a promise?

Could someone shed light on why the key value is showing as undefined within the arrow function: // in parent component const Parent = () => { const [key, setKey] = useState<string>(); // this contains an expensive function we on ...

Ways to delete a class in typescript

There's a menu on my website with li tags containing an a element for navigation. Everything is working fine, but I'm facing an issue where I need to remove all elements with the class seleccionado and only add it to the clicked li. I tried using ...

Incorporating TypeScript seamlessly into your current Create React App project without the need to modify any existing code or files

While I have already installed Typescript in my project, I am more concerned about adding new .tsx files and ensuring they are type-checked. Simply renaming existing .js files to .tsx is not a viable solution, as it requires refactoring all the existing ...

What is the best way to incorporate node modules into my tsconfig file?

I've taken some raw angular typescript components and packaged them into a private NPM module for sharing between various projects. Although I import these components like any other npm library, I encounter an error message when trying to serve my ap ...

Tips for resolving the issue of "API resolved without sending a response fetch" while utilizing Sentry

I've browsed through numerous other resources but still can't find a solution to this problem: why does the API resolved without sending a response for /api/git/latest-commit, this may result in stalled requests. error keep popping up in my next. ...

Please ensure that the property name is a valid type, such as 'string', 'number', 'symbol', or 'any'

Can anyone help me convert this JavaScript file to Typescript? import React, { useState } from 'react'; import { Button } from './Button'; import { Link } from 'react-router-dom'; import './Navbar.css'; import Settin ...

Error: The createContext function is designed for use only in Client Components. To enable it, include the "use client" directive at the beginning of the file

After creating a fresh Next.js application with the app folder, I proceeded to integrate Materiel UI following the example provided in the documentation. However, I encountered an error: TypeError: createContext only works in Client Components. Add the & ...

Experiencing unexpected behavior with React Redux in combination with Next.js and NodeJS

I'm in the process of developing an application using Next.js along with redux by utilizing this particular example. Below is a snippet from my store.js: // REDUCERS const authReducer = (state = null, action) => { switch (action.type){ ...

Discover the power of sharing a service instance in Angular 2 RC5

In the past, I shared a service instance by declaring it as a viewInjectors within my @Component like so: @Component({ selector: 'my-sel', viewInjectors: [SharedService], templateUrl: 'template.html', pipes: [MyPipe] }) ...

Exploring ways to pass props in functional components in React Native

I am currently exploring how to create an API in React Native with TypeScript without using the class extends component. However, I am struggling to figure out how to access and send props from one const view to another function: App.tsx import React, {us ...

Exploring the dynamic capabilities of Next.js in conjunction with

My client's Next.js website has been enhanced with Sanity for content management, but I've noticed a delay in fetching and displaying the data on screen. Previously, with hardcoded data, the site performed much faster. I am currently utilizing g ...

Using Cookies with Next.js and Vercel

I am facing an issue with my NextJs app deployed on Vercel where the cookie is not being set. Upon checking the console in Network, I can see that the request returns a 200 status and the set-cookie value is present without any warning. However, when I loo ...

Error in TypeScript: It is not possible to use a component with MUI styling as a JSX element

I can't figure out what's going wrong. I'm attempting to include a child component in the main page, and I have a feeling it has something to do with MUI styles being applied at the end. I removed all unnecessary code and still encounter thi ...

Setting up React-Leaflet 4 in conjunction with NextJS 14 for effective functionality

Creating a leaflet map in a NextJS 14 App comes with its fair share of challenges: NextJS 14 defaults to Server Side Rendering (SSR), which isn't compatible with leaflet Webpack bundling used by NextJS 14 can cause issues with leaflet icons The nece ...

Transferring an array of interfaces between Angular 2 components

Encountering issues with passing an Array of data between components using @Input. Here is the code snippet: public ngOnInit() { this.applications = new Array<ApplicationEntryInterface>(); (...) let shortTermData = new ShortTermApplicationAdapte ...

Creating a structure within a stencil web component

In my current project, I am utilizing Stencil.js (typescript) and need to integrate this selectbox. Below is the code snippet: import { Component, h, JSX, Prop, Element } from '@stencil/core'; import Selectr from 'mobius1-selectr'; @ ...

Is there a way to recursively convert property types from one to another in an object that contains optional properties?

The scenario: I am currently working with MongoDB and a REST API that communicates using JSON. MongoDB uses objects instead of identifiers for documents, but when these objects are stringified (such as in a response body), they get converted into strings. ...