Custom server with TypeScript: error with spreading Set

Bug report

Describe the bug

When having set up Next.js with a custom server and TypeScript, after having started up the custom server and going to localhost:3000 in the browser, there happens this error RangeError: Invalid array length on the server.

To Reproduce

Repository to reproduce the issue can be found here: https://github.com/tuomokar/simple-next-express-typescript

Clone the repo, run npm i and npm run dev and go to localhost:3000. In the command line, you should see the error mentioned above.

Expected behavior

The error shouldn’t happen.

System information

• OS: Windows, but should happen on any OS
• Version of Next.js: 9.5.3
• Version of Node.js: 12.18.3

Additional context

Full stack trace:

RangeError: Invalid array length
    at __spreadArrays (C:\test\simple-next-express-typescript\.next\server\pages\_document.js:52:18)
    at getDocumentFiles (C:\test\simple-next-express-typescript\.next\server\pages\_document.js:277:13)
    at Head.module.exports../node_modules/next/dist/pages/_document.js.Head.render (C:\test\simple-next-express-typescript\.next\server\pages\_document.js:553:19)
    at processChild (C:\test\simple-next-express-typescript\node_modules\react-dom\cjs\react-dom-server.node.development.js:3293:18)    at resolve (C:\test\simple-next-express-typescript\node_modules\react-dom\cjs\react-dom-server.node.development.js:3124:5)      
    at ReactDOMServerRenderer.render (C:\test\simple-next-express-typescript\node_modules\react-dom\cjs\react-dom-server.node.development.js:3598:22)
    at ReactDOMServerRenderer.read (C:\test\simple-next-express-typescript\node_modules\react-dom\cjs\react-dom-server.node.development.js:3536:29)
    at renderToStaticMarkup (C:\test\simple-next-express-typescript\node_modules\react-dom\cjs\react-dom-server.node.development.js:4261:27)
    at renderDocument (C:\test\simple-next-express-typescript\node_modules\next\next-server\server\render.tsx:216:5)
    at renderToHTML (C:\test\simple-next-express-typescript\node_modules\next\next-server\server\render.tsx:768:14)

The error seems to be caused by the spread done here (introduced here), specifically by the attempted spread of the Set. This breaks because by default TypeScript does not support iterables on arrays.

A couple of ways to fix this would be:

• Add downlevelIteration: true to the tsconfig generated by Next.js
• Change that line to Array.from(new Set([...sharedFiles, ...pageFiles])) (funnily this works as the Array.from is transpiled a little differently than the spread)

I can make a PR to fix it but first I’d like to hear any opinions on the preferred way to fix it.

The first one of those, the downlevelIteration flag, introduces some other things to take into account regarding the emitted code (see for example https://mariusschulz.com/articles/downlevel-iteration-for-es3-es5-in-typescript)

The second one is a very simple but might be again very error prone in the future, because [...new Set()] is very concise and simple to use.

[rjerue]

Any updates? I have this occurring, but only when dev is false in the next function. Setting the following in my tsconfig does fix.

{
  "compilerOptions": {
    ...
    "downlevelIteration": true
  },
  ...
}

[tgrassl]

We had the same problem with a Custom Server + Typescript + Revalidate. As soon as the page was rebuilt the CSS+JS files were missing in the head tag. There was no error or warning message so we had to debug into the compiled next code. The reason was that in getDocumentFiles the spreaded Set for allFiles always returned an empty array.

@rjerue “downlevelIteration”: true fixed it.