dfrankland/react-amphtml

amphtml ⚡attribute

Closed this issue · 6 comments

jlarmstrongiv commented

The final code output does not include the ⚡ in the html tag.

This throws an error (not just a warning) when validating the AMP document:
The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'. (see https://www.ampproject.org/docs/reference/spec#required-markup)

I am using the template from https://github.com/dfrankland/ampreact

dfrankland commented

Hmm, according to the AMP validator, it seems to work: https://validator.ampproject.org/#url=https%3A%2F%2Fampreact-szogszfmrw.now.sh%2F

Could you give a clue about your implementation to try to reproduce this issue?

jlarmstrongiv commented

Specifically, I was using next build && next export to generate static html from this template. In order to use next export, I had to define static page(s):

// next.config.js
exports.exportPathMap = () => ({
  '/': { page: '/' },
});

After some finagling today, I found a solution. The _document is missing the required markup. Babel complains if you use just ⚡ or amp; it must be amp="amp":

<Amp.Html specName="html ⚡ for top-level html" lang="en" amp="amp">

Otherwise, the exported markup will be <html lang="en"> instead of a valid <html lang="en" amp="amp">.

In order to validate, I used npm install -g amphtml-validator and ran amphtml-validator out/index.html from the root. I also copied and pasted the index.html into their online validator.

Is the specName prop (specName="html ⚡ for top-level html") supposed to insert the amp required markup?

(On an unrelated note, where can I find a list of all the components exported by amp-html?)

  • 👍3
peltomaa commented

I also have been having problems with this issue.

  • 👎1
michaelcheng924 commented

@jlarmstrongiv Thanks! That fixed it for me!

  • 👍1
jlarmstrongiv commented

After upgrading, I realized it may be due to changes in React 16:

Warning: Invalid attribute name: `⚡`
    in html
    in Html_68746d6c20e29aa120666f7220746f702d6c6576656c2068746d6c
    in Html (at _document.js:77)
    in MyDocument
dfrankland commented

Should work starting with version 3.1.0