Running the "npm start" command in Next.js results in the error message: "Unable to execute dev server: Error: [object Object]"

Just delving into the world of Next.js and feeling a bit lost with debugging. You can view the code here.

Background: I went through the Amplify Next.js tutorial (although Amplify might not be the issue here), but opted for TypeScript as my language choice. I created an empty tsconfig.json file which was automatically populated. The only .ts files in my project at this point are those generated from Amplify. When running 'next dev', I encounter a cryptic error message:

Error: [object Object]

The call stack does not provide any clues about my own code, leaving me stumped on how to proceed with debugging:

Call Stack
DevServer.renderToResponse
file:///C:/Java/Source/ts-next-amplified/node_modules/next/dist/server/next-server.js (1631:72)
processTicksAndRejections
internal/process/task_queues.js (93:5)
async DevServer.pipe
file:///C:/Java/Source/ts-next-amplified/node_modules/next/dist/server/next-server.js (1148:25)
async Object.fn
file:///C:/Java/Source/ts-next-amplified/node_modules/next/dist/server/next-server.js (949:21)
async Router.execute
file:///C:/Java/Source/ts-next-amplified/node_modules/next/dist/server/router.js (222:32)
async DevServer.run
file:///C:/Java/Source/ts-next-amplified/node_modules/next/dist/server/next-server.js (1125:29)
async DevServer.run
file:///C:/Java/Source/ts-next-amplified/node_modules/next/dist/server/dev/next-dev-server.js (439:20)
async DevServer.handleRequest
file:///C:/Java/Source/ts-next-amplified/node_modules/next/dist/server/next-server.js (320:20)

I attempted to debug in IntelliJ, but the "toggle break on exception" feature seems ineffective in this scenario.

Both IntelliJ and "next lint" do not flag any warnings or errors in the code.

Answer №1

I encountered a similar issue.

Server Error
Error: [object Object]

The error occurred during the page generation process. Any console logs will be shown in the terminal window.
Call Stack
DevServer.renderToResponse
file:///Users/***/***/***/node_modules/next/dist/server/next-server.js (1641:72)
runMicrotasks
<anonymous>
processTicksAndRejections
node:internal/process/task_queues (96:5)
async DevServer.pipe
file:///Users/***/***/***/node_modules/next/dist/server/next-server.js (1158:25)
async Object.fn
file:///Users/***/***/***/node_modules/next/dist/server/next-server.js (959:21)
async Router.execute
file:///Users/***/***/***/node_modules/next/dist/server/router.js (222:32)
async DevServer.run
file:///Users/***/***/***/node_modules/next/dist/server/next-server.js (1135:29)
async DevServer.run
file:///Users/***/***/***/node_modules/next/dist/server/dev/next-dev-server.js (445:20)
async DevServer.handleRequest
file:///Users/***/***/***/node_modules/next/dist/server/next-server.js (325:20)

The solution was to downgrade Next.js from version 12 to 11. At the moment, Amplify does not support Next.js v12.

https://github.com/aws-amplify/amplify-console/issues/2343

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

Selling with a variety of classifications

Is it possible to export in a different manner? I have a module that exports an object, which may change. The internal access to the object should be more permissive than external: // Module A. export let obj = { publiclyAvailable: 0, noTouchy: 0, }; ...

What is the best method for retrieving images from a GET request and displaying them in a gallery within an Angular 10 application using ng

Struggling with a difficult code method to import images from an API directly into a gallery or lightbox... Unfortunately, I couldn't find any helpful tutorials, but stumbled upon this example: https://stackblitz.com/edit/ngx-gallery-imageviewer Aft ...

What is the procedure for accessing a phone number in the phone app on an Android device using a webview

I have a Telegram Mini Application (TMA) where users can call sellers by clicking on a button in the seller details block. Issue: When a user clicks on the phone number button, the phone app opens without automatically entering the phone number. My curre ...

Is there a way to silence TypeScript's complaints about a React rendered value being converted into a Date object?

In my latest project using Next.js, TypeScript, Prisma, and Radix-UI, I'm working with a loan object that has various key-value pairs: { "id": 25, "borrowerName": "Test Borrower 1", "pipelineStage": ...

Utilize a module within a script in the continuous integration setup of a React application

I've created a module to verify if all the necessary environment variables are properly set in a React application. Here's a simple example of how it works: const getEnvironmentVariable = (key: string): string => { if (process.env[key]) { ...

Next.js not storing prop value in state variable

In my current project using Next.js, I am facing an issue with passing props from one component to another. These props include properties of a product such as name, ID, and quantity. This particular component is a Cart Component responsible for rendering ...

Issue arising from using setCollideWorldBounds and overlap in Phaser 3

I'm facing an issue with Phaser 3. Whenever I use setCollideWorldBounds, I get an error saying "Cannot read property 'setCollideWorldBounds' of null" and the overlapping function doesn't seem to work. What's even more strange is t ...

The useState hook in React Native doesn't seem to function properly on Android when using Expo

I am attempting to have a user join a room in socket.io. The event sent from my react-native client looks like this: export default function App() { const [username, setUsername] = useState('') const [room, setRoom] = useState('') ...

Angular HttpInterceptor failing to trigger with nested Observables

Utilizing a HttpInterceptor is essential for adding my Bearer token to all calls made to my WebApi. The interceptor seamlessly functions with all basic service calls. However, there is one specific instance where I must invoke 2 methods and utilize the re ...

Express: issue retrieving numbers from request body array

JavaScript / TypeScript Issue: export const updateSettings = catchErrors(async (req, res) => { console.log("updateSettings req.body: ", req.body) const { organizationId, formdata, updatedItems, updateQuota } = req.body; console.lo ...

Accessing the return value from an Angular subscription and storing it in

How can I use the value from a subscription to set the property for returning date and time? Component ngOnInit() { this.resetForm(); let defaultWIPEndTime = this.service.getDefaultWIPEndTime().subscribe(res => {}); console.log(defaultW ...

Utilizing SVG sprites in Next.js: A guide to incorporating the <use> tag

I am currently working on a Next.js project, downloading SVG sprites and configuring Next.js with svgr/webpack. When using Normal as a React component, the icons are being displayed, but I would like to use them with an SVG sprite. Below is the code snippe ...

"How can we trigger a re-render of a React component once a promise is fulfilled? Is there a way to prevent rendering until the

Having attempted to make updates to a functional component that interfaces with an azure-devops-ui/Filter, I've encountered a situation where I am utilizing the azure-devops-extension-sdk to handle async responses. This component is intended to be use ...

Is there a way to use WithStyles<typeof styles> within Material UI?

import { WithStyles, createStyles } from '@material-ui/core'; const styles = (theme: Theme) => createStyles({ root: { /* ... */ }, paper: { /* ... */ }, button: { /* ... */ }, }); interface Props extends WithStyles<typeof styles> ...

Enabling TypeScript's noImplicitAny setting has eliminated the implicit 'any' typing for Errors

During the development of our TypeScript application, we have been utilizing the "noImplicitAny" compiler option in tsconfig.json: "noImplicitAny": true As we delve deeper into error handling, we came across the following insights: How do you use typed ...

Is it better to retrieve data on the server side or client side in order to fill a select element in a Next.js form?

Currently, I am in the process of developing a web system with Next 13 where I am faced with a dilemma when it comes to populating a select element. The select element needs to be populated with data from my database, but it is within a client-side form t ...

Is there a way to retrieve the value of bindings in the component controller using Angular 1.5 and Typescript?

In my quest to develop a versatile left-hand menu component that can dynamically display different menu structures based on input strings, I stumbled upon an interesting challenge. By binding a string to the <left-hand-menu-component> element like so ...

How to refresh Google reCaptcha v3 in an Angular Firebase project

Recently, we encountered a problem with our application's signup process using OTP. We utilized Firebase phone authentication, which includes Google reCaptcha v3. While the OTP was sent successfully, we faced an error when attempting to change the pho ...

Having trouble uploading a file in PDF format (*.pdf)

I'm attempting to use Node's readFile method to read a file and then send it as a response so that the user can download it. This is the code snippet I have: async function(req, res, next) { const query = { id: req.params.id }; // @ts-ignore co ...

What are the steps for configuring i18n translated URL paths in Next.js?

I have successfully implemented multi-language support on my website using Next.js i18n-routing. When I create a file in /pages/about.js, the URLs are generated based on my locale settings: EN -> /about DE -> /de/about ES -> /es/about Everything ...