Next.js: with-typescript-styled-components doesn't work with amp

[Janpot]

Bug report

Describe the bug

I'm getting errors when I try to add AMP support to the with-typescript-styled-components example.

TypeError: Cannot read property '__html' of undefined
    at /Users/janpot/Desktop/with-typescript-app/.next/server/static/development/pages/_document.js:1228:56
    at Array.map (<anonymous>)
    at Head.render (/Users/janpot/Desktop/with-typescript-app/.next/server/static/development/pages/_document.js:1227:29)
    at processChild (/Users/janpot/Desktop/with-typescript-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2959:18)
    at resolve (/Users/janpot/Desktop/with-typescript-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2812:5)
    at ReactDOMServerRenderer.render (/Users/janpot/Desktop/with-typescript-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3202:22)
    at ReactDOMServerRenderer.read (/Users/janpot/Desktop/with-typescript-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29)
    at Object.renderToStaticMarkup (/Users/janpot/Desktop/with-typescript-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3661:27)
    at renderDocument (/Users/janpot/Desktop/with-typescript-app/node_modules/next-server/dist/server/render.js:94:18)
    at Object.renderToHTML (/Users/janpot/Desktop/with-typescript-app/node_modules/next-server/dist/server/render.js:274:16)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Run yarn create next-app --example with-typescript-styled-components with-typescript-app
2. Add export const config = { amp: true }; to index.tsx
3. yarn dev
4. See error

Expected behavior

No error, AMP page for the with-typescript-styled-components example

System information

• OS: macOS
• Version of Next.js: 9.0.0

Additional context

The example also emits a react warning:

Warning: Each child in a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
    in Fragment
    in Head
    in html
    in Html
    in MyDocument
    in Context.Provider

[indiejoseph]

+1

[tomevans18]

The issue is with these lines...

styles: [
  <>
    {initialProps.styles}
    {sheet.getStyleElement()}
  </>,
],

If you do the following it no longer errors but I am not sure of the implication as initialProps.styles is always blank for me during my tests

styles: [
  ...initialProps.styles,
  ...sheet.getStyleElement()
],

[Janpot]

@tomevans18 Indeed, but next.js wants to keep supporting fragments. (Personally I don't think it should, but ok 🙂)

In my own projects I use

styles: [
  ...(initialProps.styles || []),
  ...sheet.getStyleElement()
],

But I think at least

styles: [
  initialProps.styles,
  sheet.getStyleElement()
],

should work.

[dheerajmpai]

Amp does not work with Material UI. Please merge this question with this.

https://github.com/zeit/next.js/issues/9019

[mikhalev-im]

Seems not reproducible anymore, can be closed?