An unexpected error happened while pre-rendering the page "/404". Discover more about this issue here: https://nextjs.org/.../.../prerender-error. The error is caused by TypeError: c.props.href.startsWith

An issue arose while pre-rendering the page "/404". For more information, please visit: https://nextjs.org/docs/messages/prerender-error
TypeError: c.props.href.startsWith is not a function
    at E:\proftfolio_initial\node_modules\next\dist\shared\lib\head.js:123:43
    at Array.some (<anonymous>)
    at E:\proftfolio_initial\node_modules\next\dist\shared\lib\head.js:123:15
    at Array.map (<anonymous>)
    at reduceComponents (E:\proftfolio_initial\node_modules\next\dist\shared\lib\head.js:116:140)
    at emitChange (E:\proftfolio_initial\node_modules\next\dist\shared\lib\side-effect.js:13:36)
    at SideEffect (E:\proftfolio_initial\node_modules\next\dist\shared\lib\side-effect.js:19:9)
    at Wc (E:\proftfolio_initial\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (E:\proftfolio_initial\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (E:\proftfolio_initial\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)

.........

> A building error occurred
Error: Export encountered errors on the following paths:
        /
        /_error: /404
        /_error: /500
        /about
        /contact
        /pricing
        /works
        /works/sikhbo-kivabe
    at E:\proftfolio_initial\node_modules\next\dist\export\index.js:409:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (E:\proftfolio_initial\node_modules\next\dist\trace\trace.js:79:20)
    at async E:\proftfolio_initial\node_modules\next\dist\build\index.js:1398:21
    at async Span.traceAsyncFn (E:\proftfolio_initial\node_modules\next\dist\trace\trace.js:79:20)
    at async E:\proftfolio_initial\node_modules\next\dist\build\index.js:1258:17
    at async Span.traceAsyncFn (E:\proftfolio_initial\node_modules\next\dist\trace\trace.js:79:20)
    at async Object.build [as default] (E:\proftfolio_initial\node_modules\next\dist\build\index.js:66:29)

Everything is working fine in the development environment. The error mentioned above occurs when trying to build the project. This error prevents any page from generating.

javascriptnext.jsbuild-error

Answer №1

i was mistakenly using href instead of src

Where I went wrong

      <Head>
        <link rel="icon" type="image/x-icon" href={logoFC} />
      </Head>

What i should've done

      <Head>
        <link rel="icon" type="image/x-icon" src={logoFC} />
      </Head>

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

Exploring the use of data attributes in jQuery to access JSON objects

I have set a data-attribute for multiple elements and I am looking to access the JSON object using this data attribute in jQuery. <div class="content"> <div class="plans" data-plan="state-1"><span class="pricing-symbol">$</span> ...

javascriptjqueryjson

Is there a way to output several lines from a JSON file in print form?

I'm working with HTML code that displays multiple lines from a JSON file, but it only shows one line at a time. How can I modify the code to display all users' information? <!DOCTYPE html> <html> <head> <script> function ...

javascripthtmljson

How can you integrate jquery ajax in WordPress?

Recently, I started learning about jquery and have been following a tutorial on creating instant search using jquery. The tutorial can be found here. Now, I am trying to implement this on my WordPress site, but it seems like things work differently when d ...

javascriptphpjqueryajaxwordpress

Can the performance of a system be impacted by node.js cron?

I am looking to incorporate a cron module (such as later or node-cron) into my node server for job scheduling. The jobs in question involve sending notifications (e.g., email) to remind users to update their profile picture if they haven't done so wit ...

javascriptnode.jscron

In the template, I utilize both vue-router and jQuery. However, there seems to be an issue with $(document).ready() not functioning

Looking for guidance on using jQuery in Vue. I've noticed that when I refresh the page, $(document).ready() function is triggered. However, when I use vue-router to switch pages, $(document).ready() does not seem to work. <template> <div ...

javascriptjqueryvue.jsvuejs2vue-router

What is the best way to retrieve the parent element in jQuery when you already have the child element selected

I am working with jQuery Mobile, which automatically generates a lot of the DOM structure. The challenge I am facing is removing radio buttons without having an id for the parent div due to the HTML construction in jQuery Mobile. While I can easily targe ...

javascriptjqueryhtmldomjquery-mobile

Can the mDNS string received through webRTC be decoded to retrieve a user's IP address?

After doing some thorough research, I came across this insightful response from a different Stack Overflow question. The problem at hand involves retrieving an mDNS string, which looks like this: abcd1234-1e1e-1e1e-1e1e-abcd1a2bc3de.local I have a genuin ...

javascriptipwebrtc

"Revolutionizing web development with Sitecore NextJS Interactive Spots

Is there a way to dynamically generate 5, 10, or 15 placeholders on a webpage? I have created a placeholder with the key text-container-{*} This placeholder has been added to my Rendering and the Parameter Template is set to a Rendering parameter that inh ...

next.jssitecorejss

Rendering a page in Next.js for React based on user authentication status

I am currently experimenting with setting up a nextjs index.tsx page that will display a specific component if the user is authenticated, and another one if they are not. While I have successfully rendered the component for non-authenticated users, I am f ...

reactjsnext.jsnext-router

Tips on updating service variable values dynamically

I need to update a date value that is shared across all controllers in my website dynamically. The goal is to have a common date displayed throughout the site by updating it from any controller and having the new value reflected on all controllers. Can yo ...

javascriptjqueryangularjs

Having trouble transmitting parameters through ajax

I have been attempting to use ajax to send variables to a php page and then display them in a div, but unfortunately, it's not functioning as expected. Below is the HTML code: <div id="center"> <form> ...

javascripthtmlajax

Concealing Popover with internal click

I am currently implementing Vue-PopperJS in my project, following the setup provided on the linked page with a few modifications: <template> <Popper ref="popover" trigger="clickToToggle" :options="{ pla ...

javascriptvue.jspopper.js

Exchange selection choices among harvested selected boxes

In my project, I am working on swapping all the options between two select boxes. The specific scenario I am dealing with involves recording details of phone calls. These calls can either be inbound or outbound. For outbound calls, I have a 'caller&ap ...

javascriptjqueryjquery-chosen

Having trouble with smooth scrolling for anchor links?

I need help trouble-shooting a smooth scroll effect issue with anchor links on a client's website. Whenever I add the scroll code, the anchors on the page stop working altogether. I tried creating a pen with just a navigation and the code, and it work ...

javascriptjqueryhtmlscrollanchor

Dealing with unexpected modifications in a React class component

In short, I need to adjust the data in my class component before sending it to the server to match the API request format. To achieve this, I created a method called transformData within my class component which transforms the data extracted from the state ...

javascriptreactjsnext.js

Customizing Material UI Stepper styles using CSS API

I am trying to customize the text color (represented by an SVG Icon) in Material UI StepIcon for active and completed steps only. Currently, I have successfully changed the icon color for those steps. This is how my custom MuiTheme appears: export default ...

javascriptcssmaterial-designmaterial-uiuistepper

Extract the image URL from the href attribute using Xpath

My goal is to extract all images enclosed in href attributes from the given code snippet <div class="jcarousel product-imagethumb-alt" data-jcarousel="true"> <ul> <li> <a href="https://domain/imagefull.jpg" onclick="return false;" cla ...

javascripthtmlcssxpath

How to efficiently target and manipulate links using jQuery Mobile

I previously asked a question about loading an external page without ajax while maintaining it as an iOS web app window. In that example, I used the following code: <script> $(document).bind('pageinit', function() { $("#test").click(func ...

javascriptjqueryiosjquery-mobile

In order to make Angular function properly, it is crucial that I include app.get("*", [...]); in my server.js file

Recently, I delved into server side JavaScript and embarked on my inaugural project using it. The project entails a command and control server for my own cloud server, operating with angular, Expressjs, and bootstrap. Presently, I am encountering challeng ...

javascriptnode.jsangulartypescriptexpress

Is there anyone who can clarify the operations happening within this Three.js StereoEffect code?

Is there anyone knowledgeable in stereo rendering who can provide an explanation of how these functions work together to achieve the VR stereo effect? Information on functions like StereoCamera(), setScissor(), setViewPort() in the three.js library seems s ...

javascriptthree.jsvirtual-realitystereoscopy