Next.js: amp-sidebar not valid in next-js

Created on 6 Jul 2019 · 5Comments · Source: vercel/next.js

When including amp-sidebar in a page, it generates the following HTML:

                <body>
                  <div id="__next">
                    <amp-sidebar>...</amp-sidebar>
                  </div>
                </body>

It generates the following validation error:

The parent tag of tag 'amp-sidebar' is 'div', but it can only be 'body'

I have also tried to implement custom Document but then I lose <style custom-amp>...</style>.

Is there any other option to include the amp-sidebar component with next.js?

Source

iliran11

Most helpful comment

This is solved in the canary release already 🙏 You can try it using yarn add next@canary. Will be out on stable very soon

timneutkens on 6 Jul 2019

🚀2

All 5 comments

This is solved in the canary release already 🙏 You can try it using yarn add next@canary. Will be out on stable very soon

timneutkens on 6 Jul 2019

🚀2

I still keep getting the same error. Tried with next and next@canary - Both cause a build error to occur:

/  error  The parent tag of tag 'amp-sidebar' is 'div', but it can only be 'body'.  https://amp.dev/documentation/components/amp-sidebar

pages/index.js

import Head from "next/head";

export const config = { amp: true };

export default function HomePage(props) {
    return (
        <div>
            <Head>
                <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
            </Head>

            <amp-sidebar id="site-sidebar" layout="nodisplay" side="right">
                <nav toolbar="(min-width: 980px)" toolbar-target="site-header__toolbar-target">
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li><a href="/">Lorem</a></li>
                        <li><a href="/">About us</a></li>
                    </ul>
                </nav>
            </amp-sidebar>

            <div id="site-header__toolbar-target"></div>
        </div>
    )
}

package.json

...
  "dependencies": {
    "next": "^9.0.3-canary.6",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
...

achrinza on 5 Aug 2019

Well in that case you put it into a <div> yourself, you can use fragments instead: <>

timneutkens on 5 Aug 2019

👍1

Well in that case you put it into a <div> yourself, you can use fragments instead: <>

That solves the issue, thanks!

achrinza on 5 Aug 2019

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\staticdevelopment\pages_document.js:819:76
at Array.map ()
at Head.render (D:\sumitprojects\NextSimpleStarter.next\server\staticdevelopment\pages_document.js:819:27)
at processChild (D:\sumitprojects\NextSimpleStarter\node_modulesreact-dom\cjsreact-dom-server.node.development.js:3171:18)
at resolve (D:\sumitprojects\NextSimpleStarter\node_modulesreact-dom\cjsreact-dom-server.node.development.js:3013:5)
at ReactDOMServerRenderer.render (D:\sumitprojects\NextSimpleStarter\node_modulesreact-dom\cjsreact-dom-server.node.development.js:3436:22)
at ReactDOMServerRenderer.read (D:\sumitprojects\NextSimpleStarter\node_modulesreact-dom\cjsreact-dom-server.node.development.js:3395:29)
at Object.renderToStaticMarkup (D:\sumitprojects\NextSimpleStarter\node_modulesreact-dom\cjsreact-dom-server.node.development.js:3969:27)
at renderDocument (D:\sumitprojects\NextSimpleStarter\node_modulesnext-server\dist\serverrender.js:89:18)
at Object.renderToHTML (D:\sumitprojects\NextSimpleStarter\node_modulesnext-server\dist\serverrender.js:299:16)