NExt JS v11.1.2 Build issues - TypeError: c.props.href.startsWith

user_14143473 0
Viewed 554

I upgraded a small project to Next 11.1.2, and no I am having issues deploying to Vercel.

I can run build locally with no issues, but did have the same issue before adding getServerProps to each page giving the same error as below. But on Vercel it crashes the server with error on '/'. I know it is refering to a href tag somewhere (i realise id have to show you whole code base to dig properly) but does anybody know a way to debug this issue as its a little generic. Or maybe you have seen and solved before?

I can see issue is in Head somewhere.

2021-10-08T10:07:17.293Z    ecec99d6-6889-4855-9178-b2303c450259    ERROR   TypeError: c.props.href.startsWith is not a function
    at /var/task/.next/server/chunks/859.js:785:29
    at Array.some (<anonymous>)
    at /var/task/.next/server/chunks/859.js:783:87
    at /var/task/node_modules/react/cjs/react.production.min.js:17:388
    at O (/var/task/node_modules/react/cjs/react.production.min.js:16:230)
    at O (/var/task/node_modules/react/cjs/react.production.min.js:17:44)
    at Object.P [as map] (/var/task/node_modules/react/cjs/react.production.min.js:17:355)
    at Head.makeStylesheetInert (/var/task/.next/server/chunks/859.js:782:36)
    at Head.render (/var/task/.next/server/chunks/859.js:839:23)
    at d (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:35:231)
2021-10-08T10:07:17.294Z    ecec99d6-6889-4855-9178-b2303c450259    ERROR   TypeError: c.props.href.startsWith is not a function
    at /var/task/.next/server/chunks/859.js:785:29
    at Array.some (<anonymous>)
    at /var/task/.next/server/chunks/859.js:783:87
    at /var/task/node_modules/react/cjs/react.production.min.js:17:388
    at O (/var/task/node_modules/react/cjs/react.production.min.js:16:230)
    at O (/var/task/node_modules/react/cjs/react.production.min.js:17:44)
    at Object.P [as map] (/var/task/node_modules/react/cjs/react.production.min.js:17:355)
    at Head.makeStylesheetInert (/var/task/.next/server/chunks/859.js:782:36)
    at Head.render (/var/task/.next/server/chunks/859.js:839:23)
    at d (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:35:231) {
  page: '/'
}
RequestId: ecec99d6-6889-4855-9178-b2303c450259 Error: Runtime exited with error: exit status 1
Runtime.ExitError
next.js
2 Answers

The answer by Spirconi guided me in the right direction.

The source of trouble was the href for the favicon. In my particular case I'm populating the href for the favicon with a CMS (sanity.io), and the function that generated that resource was creating an object that (for some reason I still don't understand) works fine for src in <img /> tags. I had to explicitly generate a url for that resource and it worked.

If any Sanity user pops in here this might help:

Didn't work (but works for src in <img />)

<link rel="shortcut icon" type="image/png" href={`${builder.image(my_resource_id)}`}/>

Works for favicon link's href:

<link rel="shortcut icon" type="image/png" href={`${builder.image(my_resource_id).url()}`}/>

I've been dealing with this for several days as well so thanks!

user_137871010

I changed from href={require("public/favicon.ico")} to href="/favicon.ico" and it now works.

I don't know why as a fresh build works with require. So something is conflicting somewhere that I couldn't find.

user_141434730
Related