FetchError when requesting static any file

[ghost]

Whenever a static file is requested from the server no matter what it is, the following error is getting logged to the server console:

FetchError: invalid json response body at http://localhost:4000/api/favicon.ico/home reason: Unexpected token < in JSON at position 0
    at /Users/elia/Desktop/schwebebahn/schwebebahn-fe/node_modules/next/dist/compiled/node-fetch/index.js:1:133590
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async getServerSideProps (webpack-internal:///./pages/[language]/index.tsx:490:19)
    at async renderToHTML (/Users/elia/Desktop/schwebebahn/schwebebahn-fe/node_modules/next/dist/next-server/server/render.js:36:185)
    at async /Users/elia/Desktop/schwebebahn/schwebebahn-fe/node_modules/next/dist/next-server/server/next-server.js:76:329
    at async /Users/elia/Desktop/schwebebahn/schwebebahn-fe/node_modules/next/dist/next-server/server/next-server.js:75:142
    at async DevServer.renderToHTMLWithComponents (/Users/elia/Desktop/schwebebahn/schwebebahn-fe/node_modules/next/dist/next-server/server/next-server.js:99:365)
    at async DevServer.renderToHTML (/Users/elia/Desktop/schwebebahn/schwebebahn-fe/node_modules/next/dist/next-server/server/next-server.js:100:656)
    at async DevServer.renderToHTML (/Users/elia/Desktop/schwebebahn/schwebebahn-fe/node_modules/next/dist/server/next-dev-server.js:34:578) {
  type: 'invalid-json'
}

I realize this has to do with the fact that I have a dynamic route at the root level pages/[language] and changing this from a dynamic route to a static one resolves the issue, I just don't know if this is a normal behavior of Next.js or how to go about it!

Any help would be much appreciated 🙏

Cheers!

[leerob]

Could you share a CodeSandbox replicating your issue? 🙏

[ghost]

Is there a next.js Codesandbox template somewhere?

[leerob]

https://codesandbox.io/s/zeitnextjs-hello-world-1y99m5k27j

[ghost]

Unfortunately, I was not able to reproduce the issue on Codesandbox 😕

The error is only logged to the server when requesting the file directly in the browser's URL bar (for example http://localhost:4000/sitemap.xml)

to explain more, if a picture is requested from within the page, no errors are logged, but if I put the URL of the image in the URL bar and request it, the error mentioned above will be logged on the server side (no errors are shown in the browser and the file is sent back how expected)

But then while testing, I misspelled the file name once, and it was trying to access the dynamic route I have on the root level (pages/[language]/index.tsx) so out of curiosity, and since I know that the file name should not match any routes in the pages folder, I changed the dynamic route to a static one, and it completely resolved the issue!

I am totally clueless to what could be causing this 🤷🏻‍♂️

[ghost]

So @leerob, after a LOT of digging down, It turned out this was happening because the favicons were placed in a nested folder public/favicons and moving them to the root resolved the issue completely.

If this is not a normal behavior of Next.js and it should be reported as a bug, please let me know and I will create an issue and supply a Codesandbox replicating the issue!

furthermore, thank you very much for taking the time to answer my question.

Cheers!