Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Single meta tag missing #1087

Closed
2 tasks done
aronmal opened this issue Oct 18, 2023 · 2 comments
Closed
2 tasks done

[Bug]: Single meta tag missing #1087

aronmal opened this issue Oct 18, 2023 · 2 comments
Labels
bug Something isn't working

Comments

@aronmal
Copy link
Contributor

aronmal commented Oct 18, 2023 •
edited
Loading

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

One of the meta tags is missing on the rendered DOM. I had problems with the german Umlaute (ä, ö, ...) and wondered why the utf-8 charset was missing that I explicitly added in the root.tsx. When I added the <Meta> tag for the charset in the used component, it worked. When I compared, only the charset meta tag was missing, which made me curious. But when i switched lines:

        <Meta charset="utf-8" />                        // <- This line is missing in the DOM
        <Meta http-equiv="X-UA-Compatible" content="IE=edge" />

to

        <Meta http-equiv="X-UA-Compatible" content="IE=edge" />   // <- This line is missing in the DOM
        <Meta charset="utf-8" />

The charset was there, but the other meta tag didn't appear. I don't have an explanation for this, but I love solidjs and solid-start. Let me know if any more information is needed.

I even checked in another project of mine and found the same problem:

image
(I moved the viewport elem higher for better comparison, it and the other three elements below are added in the page component, but charset is missing)
The left side is from the root.tsx and the right side is from the DOM.

When I move the charset element 1 lower:

image

The http-equiv="X-UA-Compatible" disappears.
And when I move it 1 higher:

image

Still the charset disappears.

Expected behavior 🤔

Display all elements in the <Head>, especially the charset ;)

Steps to reproduce 🕹

Steps:

  1. Add a bunch of <Link> and <Meta> elements in the <Head> of the root.tsx
  2. Find one element missing
  3. Switch their positioning
  4. Find maybe a different result, but still one missing element

Context 🔦

root.tsx file:

// @refresh reload
import { Suspense } from "solid-js";
import { Body, FileRoutes, Head, Html, Link, Meta, Routes, Scripts, Title } from "solid-start";
import "./root.css";

export default function Root() {
  return (
    <Html lang="en">
      <Head>
        <Link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png" />
        <Link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png" />
        <Link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png" />
        <Link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png" />
        <Link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png" />
        <Link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png" />
        <Link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png" />
        <Link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png" />
        <Link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png" />
        <Link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png" />
        <Link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
        <Link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png" />
        <Link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
        <Link rel="manifest" href="/favicon/manifest.json" />
        <Meta name="msapplication-TileColor" content="#ffffff" />
        <Meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png" />
        <Meta name="theme-color" content="#ffffff" />
        <Meta charset="utf-8" />                        // <- This line is missing in the DOM
        <Meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <Meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="author" content="Julian Gerhardt" />
        <meta name="keywords" content="Elektrische einräder, EUC, Monowheels, Kingsong, Inmotion, Gotway" />
        <title>SolidStart - Bare</title>
      </Head>
      <Body>
        <Suspense>
          <Routes>
            <FileRoutes />
          </Routes>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
  );
}

Your environment 🌎

Linux, pnpm as package manager, VSCode, bug occours in dev and builded.
@aronmal aronmal added the bug Something isn't working label Oct 18, 2023
@ryansolid
Copy link
Member

In setting up for SolidStart's next Beta Phase built on Nitro and Vinxi we are closing all PRs/Issues that will not be merged due to the system changing. If you feel your issue was closed by mistake. Feel free to re-open it after updating/testing against 0.4.x release. Thank you for your patience.

See #1139 for more details.

@aronmal
Copy link
Contributor Author

aronmal commented Dec 22, 2023

The 0.4.x beta is not yet on npm, right? Is there a way how I could test it out or should I wait for the stable release?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ryansolid @aronmal