Encountering the error message "[TypeError]: Unable to access properties of undefined (reading 'prototype')" when utilizing axios post function in next.js

I am encountering an issue while utilizing the next.js app directory and attempting to make a POST request using axios.

  const submitHandler = async (e) => {
    e.preventDefault();
    try {
      const {data} = await axios.post('/api/register', {
        name, 
        email, 
        password,
      });
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  };

The error message (excerpt):

error - Error [TypeError]: Cannot read properties of undefined (reading 'prototype')
    at eval (webpack-internal:///(sc_server)/./node_modules/mongoose/lib/types/objectid.js:15:36)
    at (sc_server)/./node_modules/mongoose/lib/types/objectid.js (/Users/yakovtzur/Documents/Coding/Development/next_13_authjs/.next/server/app/api/register/route.js:2870:1)
    at __webpack_require__ (/Users/yakovtzur/Documents/Coding/Development/next_13_authjs/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_server)/./node_modules/mongoose/lib/drivers/node-mongodb-native/collection.js:7:18)
javascriptnext.jsaxios

Answer №1

To integrate mongoose 7 with your project, make sure to add the serverComponentsExternalPackages option in your next.config.js file:

/** @type {import("next").NextConfig} */
module.exports = {
    experimental: { appDir: true, serverComponentsExternalPackages: ["mongoose"] },
    webpack(config) {
        config.experiments = { ...config.experiments, topLevelAwait: true };
        return config;
    }
};

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

Adjust the button's background hue upon clicking (on a Wix platform)

I need some help with customizing the button "#button5" on my Wix website. Here are the conditions I'd like to apply: Button color should be white by default; When the user is on the "contact" page, the button color should change to red; Once the use ...

javascriptvelo

How can the camera in Three.JS be set up to avoid flipping the model upside down?

Currently, I am working on a 3D building model using Three.JS and Collada loader. My focus right now is on enhancing the interactivity of the system, but I am encountering two main challenges: 1- Whenever I rotate the model within the scene, it rotates on ...

javascriptthree.jswebglinteractivecollada

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

javascripttypescriptreact-hooks

Is there a way to execute code right before the jQuery submit() function is run?

I'm currently facing an issue with executing codes before a validation function runs in my form. I have tried different methods including referring to How to order events bound with jQuery, but without success. This is the code snippet I am working w ...

javascriptjquery

Tips for successfully passing an object via a Link

I am trying to pass an object through a Link component in react-router v6. Can someone please guide me on how to achieve this? Below is a snippet of my code where the user should be directed to another component. import React from 'react' import ...

javascriptreactjs

"Expand your list in AngularJS by automatically adding more items if the ng-repeat count is

I am struggling with this section of code. It currently shows a box with the first four linked resource images. However, I need it to display additional images if there are less than four. I tried looking for a solution, but couldn't find one. <di ...

javascriptangularjsangularjs-ng-repeat

experimenting with an API by utilizing the OPTIONS method and encountering a 405 error on

Recently, I started working with vue and nuxt to connect them to an API created with fastapi. However, whenever I attempt to register a new account using the Vue form, I encounter this error. 127.0.0.1:52137 - "OPTIONS /user HTTP/1.1" 405 Metho ...

vue.jsaxiosnuxt.jsmicroservicesfastapi

Receiving time slots on a bootstrap schedule

I recently developed a calendar using Bootstrap that allows users to select a start date and automatically sets the end date within a 7-day range from the chosen start date. However, I am facing a challenge in enabling users to also pick minutes along with ...

javascripthtmltwitter-bootstrap

Tips on how to eliminate items from a list that do not include a specific character

I need help with a list that has a specific format /listing/vasita-otomobil-volkswagen-boyasiz-2016-passat-variant-1.6-tdi-dsg-higline-sunroof-hayalet-819608311/detail,#,#,,/listing/vasita-otomobil-volkswagen-boyasiz-2016-passat-variant-1.6-tdi-dsg-higline ...

javascriptnode.js

Display a loading spinner on the browser while the form is being submitted

My current project involves using AJAX to retrieve data and populate a form. The data being fetched is quite large, resulting in a delay as it is fetched from the database and filled into the form fields. During this process, I display a loading icon to in ...

javascriptphpjqueryajaxforms

I am having difficulty retrieving information from the Laravel API

I am struggling to retrieve data from my Laravel application and display it in Vue CLI. While I can see the response, I am encountering difficulties when trying to show it in the Vue application. https://i.stack.imgur.com/tCgrd.png Whenever I attempt to f ...

laravelvue.jsaxios

Having trouble installing the 'ws' npm package on MacOS Big Sur?

Every time I try to install the websocket package using "npm install ws", I keep getting this error message: npm ERR! code ENOSELF npm ERR! Refusing to install package with name "ws" under a package npm ERR! also called "ws". Did you name your project the ...

javascriptnode.jsnpmwebsocket

Javascript AppendChild Problem with Internet Explorer

When it comes to this particular snippet of code, everything seems to run smoothly in Firefox and Chrome. However, Internet Explorer is causing some major headaches. var anotherDiv= document.getElementById("anotherDiv"); var destination = document.getElem ...

javascriptinternet-explorerhtmlinternet-explorer-8appendchild

Vercel FastAPI Backend experiencing 405 Error - Functioning locally but not on server

After successfully deploying my NextJS-frontend/FastAPI-backend app on Vercel, I encountered an issue related to CORS. I am receiving a 405 Method Not Allowed error when attempting to POST/GET to my FastAPI backend from the frontend. In my local developme ...

next.jscorsfastapivercel

Removing a select menu in Discord.js once a selection has been made

Currently in the process of creating a ticket tool that utilizes a select menu for choosing a topic const row = new MessageActionRow() .addComponents( new MessageSelectMenu() .setCustomId(`select_menu`) .setPlac ...

javascriptdiscorddiscord.js

How to Condense an Element Using Position: Absolute

https://i.sstatic.net/GMUss.png I'm attempting to create functionality where the "Open Chat" button displays an Absolute positioned div, then hides it when clicked again. I experimented with using the react-collapse component, but encountered issues ...

javascripthtmlcssreactjs

What are the best ways to gather value using javascript?

My Javascript array looks something like this below: [ { "id": 1, "facilities": [ { "id": 10, "name": "Wifi", "label": "Wifi" }, { "id": 12, "name": "Toll", "label": "Toll" ...

javascriptarraysnode.jsobject

Conceal the div by clicking outside of it

Is there a way to conceal the hidden div with the "hidden" class? I'd like for it to slide out when the user clicks outside of the hidden div. HTML <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.c ...

javascriptjqueryhtmlcss

The compatibility issue arises when using Nextjs Middleware with Next Auth V5 on Amplify, prompting error messages such as "Server configuration problem" and "Host must be trusted"

System: OS: macOS 14.3.1 CPU: (10) arm64 Apple M1 Pro Memory: 174.97 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 10.2.4 - ~/.nvm/versions/node/v18.17.1/bin/np ...

next.jsaws-amplifynext-auth

Despite my attempts to extract the image from the html data table and showcase it in a div, the image remains elusive and refuses to appear

I am currently able to extract data from an HTML data table and set it into a textbox. However, I am facing an issue when trying to retrieve an image from the HTML data table and display it in a div element. Unfortunately, the image is not showing up. Any ...

javascriptphpjquery