Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using amp with emotionjs, throws amp-validator errors.

See original GitHub issue

Bug report

Describe the bug

Using css-in-js solutions, throws errors with amp-validator, speciefly this one:

The parent tag of tag 'style amp-custom' is 'div', but it can only be 'head'

I’m using chakra-ui, which is based on emotion-js

To Reproduce

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

git clone https://github.com/yassinebridi/amp-chakra
yarn install && yarn dev.
see errors in the console.

Expected behavior

For the amp-validator to pass

System information

OS: Arch linux
Browser : Chrome 81
Version of Next.js: 9.4.0
Version of Node.js: 14.2.0

Issue Analytics

State:
Created 3 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

yassinebridicommented, Jun 3, 2020

I found out the problem was with the chakra provider, in the _app.tsx, especially the <CSSReset /> component, so i just conditionally render it depending on whether the page is amp or not:

<ThemeProvider theme={theme}>
  {isAmp ? (
    null
  ) : (
      <CSSReset />
    )}
</ThemeProvider>

please close this if you think it’s unrelated to nextjs.

0reactions

balazsorban44commented, Dec 25, 2022

This issue has been automatically closed because it received no activity for a month and had no reproduction to investigate. If you think it was closed by accident, please leave a comment. If you are running into a similar issue, please open a new issue with a reproduction. Thank you.