Error: The URL constructor is unable to process /account as a valid URL address

Working on a new social media app using appwrite and nextjs, encountering an error "TypeError: URL constructor: /account is not a valid URL" upon loading the website. Here's the current file structure of my app: File Structure


Below is the layout.tsx file from the main app directory:

import type { Metadata } from 'next'
import './globals.css'
import { QueryProvider } from './lib/queries/QueryProvider'
import AuthProvider from './context/AuthContext'
import { Toaster } from '@/components/ui/toaster'


export const metadata: Metadata = {
  title: 'Janadh',
  description: 'The Social Media of Education',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
          <QueryProvider>
            <AuthProvider>
        {children}
        <Toaster />
            </AuthProvider>
          </QueryProvider>
      </body>
    </html>
  )
}

Here's the content of app/lib/appwrite/api.ts:

import { INewUser } from "@/app/types";
import { ID, Query } from "appwrite";
import { account, appwriteConfig, avatars, databases } from "./config";

export async function createUserAccount(user: INewUser) {
  try {
    const newAccount = await account.create(
      ID.unique(),
      user.email,
      user.password,
      user.name
    );

    if (!newAccount) throw Error;

    const avatarUrl = avatars.getInitials(user.name);

    const newUser = await saveUserToDB({
      accountId: newAccount.$id,
      name: newAccount.name,
      email: newAccount.email,
      username: user.username,
      imageUrl: avatarUrl,
    });

    return newUser;
  } catch (error) {
    console.log(error);
  }
}

// More functions and code here...

For additional code or assistance with resolving the error, feel free to reach out.

Answer №1

If you encounter this issue, it could be due to incorrect configuration of the Appwrite endpoint. The correct format for the endpoint should follow: https://<HOSTNAME>/v1 (use either http or https).

For reference, a properly formatted endpoint would look like this: https://cloud.appwrite.io/v1

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

Struggling to delete event listeners in TypeScript using object-oriented programming with JavaScript

After researching the issue, I have discovered that the onMouseUp event is being fired but it is not removing the EventListeners. Many individuals facing a similar problem fail to remove the same function they added initially. Upon reading information fr ...

Guide on changing the background image of an active thumbnail in an autosliding carousel

My query consists of three parts. Any assistance in solving this JS problem would be highly appreciated as I am learning and understanding JS through trial and error. I have designed a visually appealing travel landing page, , featuring a thumbnail carous ...

Employing square bracket notation based on the input data

I'm currently in the process of enhancing some code within my library, but I've encountered a perplexing issue with bracket notation not functioning as expected when attempting to call an imported class. The parameter type expects a camelCased s ...

Server Error: Experiencing an overload of renders. React has set limits on the number of renders to avoid getting caught in an endless loop

I am currently attempting to develop a basic stopwatch application and encountering the following error message. Despite trying various solutions from similar queries, I have not been able to pinpoint the root cause of this issue or resolve it. Below is t ...

Phone-based Authentication with Ionic 2

In my current project, I am working on implementing Ionic 2 login functionality using phone number and password. The backend is being handled by Laravel 5.3 passport. While the login process works fine when tested with Postman, I encountered an error when ...

Modifying the user interface (UI) through the storage of data in a class variable has proven to be

If I need to update my UI, I can directly pass the data like this: Using HTML Template <li *ngFor="let post of posts; let i = index;"> {{i+1}}) {{post.name}} <button (click)="editCategory(post)" class="btn btn-danger btn-sm">Edit</butto ...

Invoke the API when the value of a property in the SPFX property pane is modified

Here's a question that might sound silly, but I'll ask anyway. I have a dropdown field in my Property pane that is filled with all the lists from the current site. It's working fine. When I change the dropdown selection, it populates a pro ...

When is the best time to access user credentials in the FirebaseUI authentication process?

Referring to a provided example on using firebase authentication with Next.js from the Next.js github, I have noticed that many projects I have studied incorporate createUserWithEmailAndPassword at some point. This function allows them to utilize user cred ...

React NextJS: Unable to retrieve cookies or properties post redirection

Within my nextJS application, when a user logs in on the login page, a cookie is created with a token and then they are redirected to the main page which utilizes the main component. However, within the Main component, I am encountering an issue where the ...

Fixing prop passing issues in Vue.js components to prevent errors

My Vue-cli install with TypeScript is set up to render JSX using a boilerplate. However, I am facing an issue when trying to pass a property to the HelloWorld component. Here's what my code looks like: export default Vue.extend({ name: 'App&apo ...

Unable to fulfill the pledge

I'm struggling to receive the promise from the backend after making a get request. Can anyone help me figure out what I might be doing wrong? makeLoginCall(_username: string, _password: string) { let promise = new Promise((resolve, reject) => ...

reveal.js: Upon a fresh installation, an error has been encountered: ReferenceError - 'navigator'

Currently, I am attempting to integrate reveal.js into my React.js/Next.js website using the instructions provided at However, upon implementation, I encountered the following error: Server Error ReferenceError: navigator is not defined This error occurr ...

Initial binding of Angular2 ControlGroup valueChanges event

My form contains <input type="text"> elements and I've noticed that ControlGroup.valueChanges is triggered during initial data binding when using [ngFormModel] and ngControl. As a result, it gives the impression to the user that the form has al ...

Develop a novel object framework by merging correlated data with identical keys

I am trying to organize the related data IOrderData by grouping them based on the productId and brandId. This will help create a new array of objects called IOrderTypeData, where the only difference between the objects is the delivery type. Each product id ...

Enhance the MUI palette by incorporating TypeScript, allowing for seamless indexing through the palette

When utilizing the Material UI Palette with Typescript, I am encountering a significant issue due to limited documentation on MUI v5.0 in this area. Deep understanding of typescript is also required. The objective is to iterate through the palette and vir ...

Ways to resolve issue with a build script that is missing when deploying Cypress in GitHub Actions

I recently attempted to implement a GitHub action to run Cypress tests on my app. Here is the configuration of my workflow file: name: Cypress Tests on: [push] jobs: cypress-run: runs-on: ubuntu-latest defaults: run: working-dire ...

Navigating the correct way to filter JSON data using HttpClient in Angular 4

Struggling with transitioning from Http to HttpClient, here's the code in question: constructor(public navCtrl: NavController, public http: HttpClient, private alertCtrl: AlertController) { this.http.get('http://example.com/date.php') .su ...

What is causing the cleanup function of useEffect to unexpectedly close a modal in Next.js?

I am currently working on implementing a modal dialog feature using the latest version of Next.JS (version 12.3.1). My goal is to have the modal open immediately, display a loading message while a request is being made, and then show the result of the requ ...

Using TypeScript to Load JSON Data from a Folder

I'm a newcomer to TypeScript and encountering an issue. My task involves dynamically loading objects from a directory that houses multiple JSON files. The file names are generated through an export bash script populating the resource directory. I wan ...

The attribute is not found on the combined type

After combing through various questions on stackoverflow, I couldn't find a solution to my specific case. This is the scenario: interface FruitBox { name: string desc: { 'orange': number; 'banana': number; } } interf ...