Next.js: AMP does not allow the attribute 'as' appeared in tag 'link rel='

Created on 19 Jun 2017 · 8Comments · Source: vercel/next.js

When running the with-amp example, the AMP validator shows errors The attribute 'as' may not appear in tag 'link rel='.

The errors are related to the following lines generated by the component automatically:

<link rel="preload" href="/_next/1497861989817/page/" as="script"/>
<link rel="preload" href="/_next/1497861989817/page/_error/index.js" as="script"/>
<link rel="preload" href="/_next/1497861989817/manifest.js" as="script"/>
<link rel="preload" href="/_next/1497861989817/commons.js" as="script"/>
<link rel="preload" href="/_next/1497861989817/main.js" as="script"/>

bug example

Source

garfieldduck

👍4

Most helpful comment

@garfieldduck I'm having the same issue using next-3.0.0-beta3 and 3.0.1-beta.1. I didn't modify the example. A workaround is to change the <Head> tag in _document.js to <head> and the <meta charset='utf-8' /> tag to <meta charSet='utf-8' />.

@impronunciable Could you share which version of nextjs you used to generate your example? Or share the code?

korneel on 26 Jun 2017

👍2 ❤1

All 8 comments

@garfieldduck The validator is passing for me. Just to confirm I deployed the example as it is on https://with-amp-hiwywerbxd.now.sh (and it's validating)
screen shot 2017-06-23 at 3 24 35 pm

Have you modified the example?

impronunciable on 23 Jun 2017

@impronunciable Could you let me know which version of nextjs you are using?
Because I used [email protected] and [email protected], and both of them produced AMP errors as follow:
screenshot 2017-06-26 18 03 53

The errors seem to be generated by the following code (in /sever/document.js):

 <link rel='preload' href={`${assetPrefix}/_next/${buildId}/page${pagePathname}`} as='script' />
 <link rel='preload' href={`${assetPrefix}/_next/${buildId}/page/_error/index.js`} as='script' />

garfieldduck on 26 Jun 2017

👍3

@impronunciable Could you share which version of nextjs you used to generate your example? Or share the code?

korneel on 26 Jun 2017

👍2 ❤1

@impronunciable could you have a look?

timneutkens on 2 Jul 2017

@korneel this is the code https://with-amp-hiwywerbxd.now.sh/_src
and the next version is 2.1.1. I'll take a look using next 3

impronunciable on 5 Jul 2017

I see the issue. Besides the charSet that I'll update there is a bigger issue with the Head. If we change Head for head then the components are not capable of setting important tags like the page title. This is because of the preloaded scripts automatically injected

impronunciable on 5 Jul 2017

Just gave this a go - the head tag is rendered properly as lower-case, though the page produced isn't valid due to the "as" attribute on the link tags as originally reported. On Next 3.2.2.