question-mark
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.

gatsby-plugin-preact with Gatsby 3 incorrectly renders "<meta http-equiv>"

See original GitHub issue

Description

Gatsby 2 (with and without preact), and Gatsby 3 (without preact) all correctly generate:

<meta http-equiv="x-ua-compatible" content="ie=edge">

in the head, but Gatsby 3 with Preact (and preact plugin 5.0) instead generate:

<meta httpequiv="x-ua-compatible" content="ie=edge">

note httpequiv instead of http-equiv.

Steps to reproduce

Minimal repro:

  1. npm init gatsby with basic settings
  2. npm install gatsby-plugin-preact preact preact-render-to-string
  3. Add "gatsby-plugin-preact" to gatsby-config.js

Expected result

Continue to see <meta http-equiv in head.

Actual result

Output changes to <meta httpequiv instead.

Environment

  System:
    OS: Windows 10 10.0.19042
    CPU: (20) x64 Intel(R) Core(TM) i9-10900KF CPU @ 3.70GHz
  Binaries:
    Node: 15.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 7.6.1 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.0
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.45)
  npmPackages:
    gatsby: ^3.0.1 => 3.0.3 
    gatsby-plugin-google-analytics: ^3.0.0 => 3.0.0 
    gatsby-plugin-image: ^1.0.0 => 1.0.0 
    gatsby-plugin-mdx: ^2.0.0 => 2.0.0 
    gatsby-plugin-preact: ^5.0.0 => 5.0.0 
    gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0 
    gatsby-plugin-sass: ^4.0.2 => 4.0.2 
    gatsby-plugin-sharp: ^3.0.0 => 3.0.0 
    gatsby-plugin-sitemap: ^3.0.0 => 3.0.0 
    gatsby-source-filesystem: ^3.0.0 => 3.0.0 
    gatsby-transformer-remark: ^3.0.0 => 3.0.0 
    gatsby-transformer-sharp: ^3.0.0 => 3.0.0 
  npmGlobalPackages:
    gatsby-cli: 3.0.0

But this happens on netlify as well.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
Eyascommented, Mar 10, 2021

FWIW this breaks AMP validation on Gatsby v3 preact sites (AMP requires only known tags to be set on meta, and httpequiv is invalid (only http-equiv is valid).

0reactions
LekoArtscommented, Feb 1, 2022

Hi!

I’m closing this as a stale issue as in the meantime Gatsby 4 and related packages were released. You can check our Framework Version Support Page to see which versions currently receive active support. If this is a feature request, please create a discussion as we moved feature requests from issues to GitHub Discussions.

Please try the mentioned issue on the latest version (using the next tag) and if you still see this problem, open a new bug report. It must include a minimal reproduction.

Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting Common Errors - Gatsby
Because gatsby develop doesn't run server-side rendering, the build may look different if the plugin is not included to tell Gatsby to server-side...
Read more >
Gatsby - Adding meta tags for SSR using react-head/react ...
I've used react-helmet to inject metadata into the pages, but i've since moved to using react-head. This works on static pages, it's included...
Read more >
<meta>: The metadata element - HTML - MDN Web Docs
The HTML element represents metadata that cannot be represented by other HTML meta-related elements, like , ,
Read more >
How To Boost SEO Using Gatsby's SEO Component and ...
You will add meta tags to your site using Gatsby React Helmet. Meta tags are important because they give search engines information about...
Read more >
Meta Tag in HTML – What is Metadata and Meta Description ...
In this article, you'll learn what meta tags are in HTML and how to use ... <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found