Duplicate amp-custom

[SaltyAom]

Bug report

Describe the bug

I was working on Next.js with Netlify CMS by using withAmp().
I add <style amp-custom> in Next Head but because of using withAmp() which (likely to) auto generate <style amp-custom> with blank style.

The result is duplication of using <style amp-custom> which will failed if used AMP validator.
I try searching around about adding CSS to withAmp and changing the 'auto added' amp-custom style but result was no luck, plus I can't seem to find a proper way to fix this and documentation about using withAmp properly (which is not on 'learn' and blog post) like: second parameter options of withAmp, does it only include { hybrid: true } ?

I can't seem to find a good documentation of withAmp and can't add <style amp-custom>

To Reproduce

1. I set up a repo if you wanted to properly take a look at:

git clone -b next-amp-issue-1 https://github.com/dusit-thani-core-team/Dusit-Blog

2. run yarn dev and go to localhost:3000, you should see there's two <style amp-custom="">, one contains style, one doesn't
3. yarn export, build failed as a result of failed AMP Validator from duplication of <style amp-custom>

Expected behavior

Is there a way to reduce <style amp-custom> to one, like adding a config to remove 'auto added' <style amp-custom> or add style to 'auto added' <style amp-custom>.

Screenshots

System information

• OS: Windows 10
  Tried on Chrome and Firefox.
• Next.js 8.1.0, react: 16.8.6, react-dom: 16.8.6
• Node 12.3.1, yarn 1.15.2

Additional context

Add any other context about the problem here.
Is there a clear documentation of using AMP with CSS or using AMP or just example using similar to this?

[ijjk]

Hi, you can add custom styles using a custom _document. Any styles returned in getInitialProps for _document will be combined into the one automatic style[amp-custom].

Example:

import Document from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps (ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <style dangerouslySetInnerHTML={{
            __html: `body{ background: orange; }`
          }} />
        </>
      )
    }
  }
}

If you are still having trouble with this feel free to reply with additional info.

[rizkiandrianto]

@ijjk what if I just want to use styles on some page (only on AMP page, for example)?
I try to add <style> with dangerouslySetInnerHTML but still not working, I have 1 style with attribute amp-custom, but empty.

[skptricks]

AMP feature in next.js is not working. I have tried below source code :

import 'isomorphic-fetch'
import React from 'react'
import Link from 'next/link'

import { useAmp } from 'next/amp'
export const config = { amp: true };

const app = ({ stars }) => (

dddddddddddddssssssssssssssssssssss

First Post
) export default app
Error Message : ---
Cannot read property '__html' of undefined
TypeError: Cannot read property '__html' of undefined
at D:\sumitprojects\NextSimpleStarter.next\server\static\development\pages_document.js:819:76
at Array.map ()
at Head.render (D:\sumitprojects\NextSimpleStarter.next\server\static\development\pages_document.js:819:27)
at processChild (D:\sumitprojects\NextSimpleStarter\node_modules\react-dom\cjs\react-dom-server.node.development.js:3171:18)
at resolve (D:\sumitprojects\NextSimpleStarter\node_modules\react-dom\cjs\react-dom-server.node.development.js:3013:5)
at ReactDOMServerRenderer.render (D:\sumitprojects\NextSimpleStarter\node_modules\react-dom\cjs\react-dom-server.node.development.js:3436:22)
at ReactDOMServerRenderer.read (D:\sumitprojects\NextSimpleStarter\node_modules\react-dom\cjs\react-dom-server.node.development.js:3395:29)
at Object.renderToStaticMarkup (D:\sumitprojects\NextSimpleStarter\node_modules\react-dom\cjs\react-dom-server.node.development.js:3969:27)
at renderDocument (D:\sumitprojects\NextSimpleStarter\node_modules\next-server\dist\server\render.js:89:18)
at Object.renderToHTML (D:\sumitprojects\NextSimpleStarter\node_modules\next-server\dist\server\render.js:299:16)

[staghouse]

This is still a problem when using amp within /pages. Using fs I get the styles I want and use:

<style amp-custom="" dangerouslySetInnerHTML={{__html: this.renderAmpStyles()}}></style>

which will render the styles but the validator is still seeing an empty amp-custom style tag.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.