Issue encountered while constructing NextJS application; error was encountered during the pre-rendering of the

I encountered an issue while trying to deploy my app; specifically, I faced an error during the project building process.

info  - Loaded env from /Users/furkanulker/Desktop/Projects/dev-project/.env
info  - Skipping validation of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[    ] info  - Generating static pages (0/4)TypeError: Cannot read properties of undefined (reading 'city')
    at NotFound (/Users/furkanulker/Desktop/Projects/dev-project/.next/server/chunks/601.js:40:31)
    at Jc (/Users/furkanulker/Desktop/Projects/dev-project/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:64:191)
    ...
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The file [city].tsx presents the following content:

import { useEffect, useState } from "react";
import SearchForm from "../../components/Essential/SearchForm";
import Chart from "../../components/DataVisualization/Chart";
import ResultList from "../../components/DataVisualization/ResultList";
...
export default City;

NotFound.tsx contains:

import React from "react";
import SearchForm from "../../components/Essential/SearchForm";
function NotFound({ props }) {
  return ...
}
export default NotFound;

If you have any insights or solutions to this issue, your assistance would be greatly appreciated!

In order to meet Stackoverflow's text requirement, here is some additional filler content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Answer №1

After deleting the NotFound.tsx file and inserting the HTML code into the [location] page, the problem was resolved. However, the reason behind this solution remains unknown to me.

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

How to Dynamically Update Sass Styles with Webpack 2?

Currently, I am in the process of setting up a React application that utilizes Webpack2, webpack-dev-middleware, and HMR for the development phase. One peculiar issue that I have encountered is related to updating .scss files. When I make changes to my .sc ...

What is the process for testing an AngularJS module that is defined within an Immediately Invoked Function Expression (IIFE

Is there a way to properly test this module using jasmine? Testing the $controller function has proven to be challenging due to its encapsulation within a closure, making testing difficult. Essentially, with the module definition provided below, attemptin ...

Using Javascript and CSS to Float DIV Elements

Recently, I've been working on a small algorithm that adds a special class to an element when the mouse reaches the halfway point or beyond on the X-axis of the browser. I also have a screenshot that demonstrates where this application will be utiliz ...

"Discover the process of transforming HTML, CSS, and script files into a cohesive JavaScript format

I have developed a unique web chat widget from scratch using HTML, CSS, JavaScript, and AJAX calls. Now, my goal is to convert it into a script that can be easily embedded in any other websites or webpages. Similar to how third-party widgets work, users sh ...

Using JavaScript to Retrieve Image Sources

function validate(form) { while ($('#img').attr('src')=="../static/img/placeholder.png") { return false; } return true; } ^I'm having trouble with this code. I want my form to prevent submission as long as ...

Ways to take an item out of your shopping cart

Do you have any ideas on how to handle cart redirection in JavaScript? My specific request involves a cart with a function that removes products. What approach should I take to redirect to the main page if the cart becomes empty? Here is the delete produc ...

Download a complete website using PHP or HTML and save it for offline access

Is there a way to create a website with a textbox and save button, where entering a link saves the entire website like the 'save page' feature in Google Chrome? Can this be done using PHP or HTML? And is it possible to zip the site before downloa ...

The Mongoose _id seems to be malfunctioning when a custom value is used instead of the default value

Greetings! I am currently working with Mongoose and have a collection named 'tag' with the following schema: const tagSchema = new Schema<ITag, ITagModel>( { _id: { type: String, unique: true, required: true, }, ...

Please phone back regarding the adjustment of column sizes

Are there any callbacks provided for column resizing in ag-Grid? I was unable to locate any documentation related to column resize callbacks. Here is a sample code snippet: var onColumnResized = function(params){ console.log(params); }; gridOptions.onC ...

Choose an item within a Fabricjs canvas based on its coordinates using code

I've been struggling with this issue for quite some time. Currently, I am utilizing a Fabricjs canvas as a texture for a 3D model in Three.js. Each time there is a change on the canvas, the model renders it as a texture. My goal is to be able to cli ...

Issues with Thunderbird not displaying copied HTML emails

Hello there amazing people at Stackoverflow. I need some assistance with HTML formatting. I am currently working on a bootstrap modal that is being dynamically modified through jQuery using the append() function. Check out the code snippet below: <div ...

Allow the javascript callback function to complete before proceeding

Utilizing the Google Storage API, I am saving a file in a GCP bucket within an asynchronous function. My objective is to wait until I receive an error or success callback before proceeding with the subsequent lines of code. However, I am encountering the i ...

Increasing the size of a background image as you scroll

Is there a way to adjust the background image of a div so that it scales according to the amount the page is scrolled? The current implementation works fine on desktop screens, but on mobile screens, the height of the background image reduces and the image ...

Issue with auto height calculation occurs when element is initially hidden upon DOM load but is later displayed

Currently, I am facing an issue with an SVG that has a CSS width of 100% and height of 100%. The wrapping element spans the entire width of the screen while its height is set to auto. It's important to note that the wrap div determines the dimensions ...

Using Javascript to Retrieve Value from Address Bar

Is there a way to retrieve the address bar value when a user attempts to leave my website and navigate to another page? I am specifically not seeking the value stored in window.location, as that only pertains to the current page the user is on. I want to ...

Using regex in javascript to strip HTML tags

I'm trying to clean up my document by removing all HTML tags except for <a>, <img>, and <iframe> using the following code: var regex = "<(?!a )(?!img )(?!iframe )([\s\S]*?)>"; var temp; while (source.match(regex)) { ...

Inserting data with special characters from an Ajax POST request into a database

I am facing an issue with my form that contains text inputs. When I use an ajax event to send the values via POST to my database PHP script, special characters like ' " \ cause a problem. If the string contains only numbers/letters and no special ...

Having trouble with Jquery and closures or function references?

It seems like the issue is related to a function running in a different scope where the jQuery library is not accessible. This can be seen when the function is called as the last parameter on the second line below. var funcExpandHeight = container.animate ...

Getting data from an HTML file with AJAX

I have a JavaScript application where I am trying to retrieve an HTML file in order to template it. Currently, I am using the following method: var _$e = null; $.ajax({ type: "GET", url: "/static ...

Commitments, the Angular2 framework, and boundary

My Angular2 component is trying to obtain an ID from another service that returns a promise. To ensure that I receive the data before proceeding, I must await the Promise. Here's a snippet of what the component code looks like: export class AddTodoCo ...