AMP: hidden attribute on amp elements causes a validation error

[sebastianbenz]

Bug report

Describe the bug

Using AMP's built-in hidden attribute on an AMP element results in a validation error:

error  The attribute 'hidden' in tag 'amp-img' is set to the invalid value 'true'.  https://amp.dev/documentation/components/amp-img

The problem is that hidden is converted into hidden=true which causes the validation error above. Using hidden on a non-AMP element works though (e.g. <div hidden>).

To Reproduce

This will cause a validation error:

import Head from 'next/head';

export const config = { amp: true };

const Index = () => (
  <amp-img hidden src="https://unsplash.it/300/200" width="300" height="200"></amp-img>
  <div hidden>Test</div>
);

export default Index;

Expected behavior

The hidden attribute should be supported on AMP elements.

System information

• Version of Next.js: 9.0.6

[c0b41]

How about instead empty string?

import Head from 'next/head';

export const config = { amp: true };

const Index = () => (
  <amp-img hidden="" src="https://unsplash.it/300/200" width="300" height="200"></amp-img>
  <div hidden>Test</div>
);

export default Index;

[sebastianbenz]

@c0b41 thanks, that's a good workaround! However, I find the inconsistent serialization behavior confusing.

[Timer]

Note this semi-conflicts with the React team's plan with the hidden attribute.

facebook/react#16831
https://www.youtube.com/watch?v=6g3g0Q_XVb4&feature=youtu.be&t=1650

[Timer]

I'm not sure this is something Next.js should really try to "patch", as its just a gotcha with JSX.

[sebastianbenz]

I agree. Just found the related react issue.

[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.