SolidJS•2y ago

frontend navigation: null is not an object (evaluating '_el$11.nextSibling')

When navigating in the frontend, I have that error that occurs. There's a staging server which should help you see what's going on: https://frontend.weltkern.dev.auaust.ch When you land on the page, it should look normal. If you navigate to the products page (by clicking the image at the center of the landing page hero), you should see an error. If you reload the page, it's fine. If you then navigate back to the homepage (scroll a little to see the navbar as it's currently still white-on-white) you get the error back, until you reload. I'll provide screenshots in a few seconds

5 Replies

apademideOP•2y ago

This is the component that causes the error.

apademideOP•2y ago

Which is the same in the products page

apademideOP•2y ago

this is the component's code:

/*trimmed imports cause message is too long*/

export default function Item(props: GridLayout.ItemProps) {
  function formattedPrice(amount: number, currency: string) {
    return new Intl.NumberFormat("fr-CH", {
      style: "currency",
      currency,
      currencyDisplay: "narrowSymbol",
    }).format(amount);
  }
  const kerningsFormatter = new Intl.NumberFormat("fr-CH", {
    style: "decimal",
    useGrouping: true,
  });
  function formattedKernings(kernings: number) {
    return kerningsFormatter.format(kernings);
  }

  return (
    <layout-grid-item
      role="article"
      attr:locked={false}
      attr:type={props.type}
      attr:rarity={props.rarity}
    >
      <A href="/hello">
        <item-image>
          <StatusIcon remaining={props.remaining} />

          <img src={props.image} alt="" />
        </item-image>

        <item-description>
          <item-name>
            <p class="author">{props.author}</p>
            <p class="title">{props.title}</p>
            <p class="publisher">{props.publisher}</p>
          </item-name>

          <hr />
          <div>
            <item-pricing>
              <Show when={props.price.trend && props.price.trend !== "neutral"}>
                <span class={`trend ${props.price.trend}`}>
                  {props.price.trend === "up" ? "↑" : "↓"}&nbsp;
                </span>
              </Show>
              <span class="price">
                <span class="currency">
                  {formattedPrice(props.price.amount, props.price.currency)}
                </span>
                <small> or </small>
                <span class="kernings">
                  {formattedKernings(props.price.kernings)}&nbsp;KS+
                </span>
              </span>
            </item-pricing>
            <RarityIcon rarity={props.rarity} />
          </div>
        </item-description>
      </A>
    </layout-grid-item>
  );
}

/*trimmed imports cause message is too long*/

export default function Item(props: GridLayout.ItemProps) {
  function formattedPrice(amount: number, currency: string) {
    return new Intl.NumberFormat("fr-CH", {
      style: "currency",
      currency,
      currencyDisplay: "narrowSymbol",
    }).format(amount);
  }
  const kerningsFormatter = new Intl.NumberFormat("fr-CH", {
    style: "decimal",
    useGrouping: true,
  });
  function formattedKernings(kernings: number) {
    return kerningsFormatter.format(kernings);
  }

  return (
    <layout-grid-item
      role="article"
      attr:locked={false}
      attr:type={props.type}
      attr:rarity={props.rarity}
    >
      <A href="/hello">
        <item-image>
          <StatusIcon remaining={props.remaining} />

          <img src={props.image} alt="" />
        </item-image>

        <item-description>
          <item-name>
            <p class="author">{props.author}</p>
            <p class="title">{props.title}</p>
            <p class="publisher">{props.publisher}</p>
          </item-name>

          <hr />
          <div>
            <item-pricing>
              <Show when={props.price.trend && props.price.trend !== "neutral"}>
                <span class={`trend ${props.price.trend}`}>
                  {props.price.trend === "up" ? "↑" : "↓"}&nbsp;
                </span>
              </Show>
              <span class="price">
                <span class="currency">
                  {formattedPrice(props.price.amount, props.price.currency)}
                </span>
                <small> or </small>
                <span class="kernings">
                  {formattedKernings(props.price.kernings)}&nbsp;KS+
                </span>
              </span>
            </item-pricing>
            <RarityIcon rarity={props.rarity} />
          </div>
        </item-description>
      </A>
    </layout-grid-item>
  );
}

managed to remove the error by removing that part:

          <div>
            <item-pricing>
              <Show when={props.price.trend && props.price.trend !== "neutral"}>
                <span class={`trend ${props.price.trend}`}>
                  {props.price.trend === "up" ? "↑" : "↓"}&nbsp;
                </span>
              </Show>
              <span class="price">
                <span class="currency">
                  {formattedPrice(props.price.amount, props.price.currency)}
                </span>
                <small> or </small>
                <span class="kernings">
                  {formattedKernings(props.price.kernings)}&nbsp;KS+
                </span>
              </span>
            </item-pricing>
            <RarityIcon rarity={props.rarity} />
          </div>

          <div>
            <item-pricing>
              <Show when={props.price.trend && props.price.trend !== "neutral"}>
                <span class={`trend ${props.price.trend}`}>
                  {props.price.trend === "up" ? "↑" : "↓"}&nbsp;
                </span>
              </Show>
              <span class="price">
                <span class="currency">
                  {formattedPrice(props.price.amount, props.price.currency)}
                </span>
                <small> or </small>
                <span class="kernings">
                  {formattedKernings(props.price.kernings)}&nbsp;KS+
                </span>
              </span>
            </item-pricing>
            <RarityIcon rarity={props.rarity} />
          </div>

item-pricing is a web component, not a Solid one i case it matters removing only item-pricing or RarityIcon doesn't change anything: if i have either one of them, i get the error I didn't manage to debug that as it only appears when using the frontend router; otherwise the component works as expected actually if you want the whole code base, here's the repo: https://github.com/AUAUST/clients-nkco-weltkern-frontend/tree/homepage the erroring component is in ./src/components/layouts/grid/Item.tsx Bringing this post back to life as I still couldn't find a fix A workaround I found is to wrap <item-name>…</item-name> in a <div>

apademideOP•2y ago

it then stop erroring

apademideOP•2y ago

i believe it's related to web components handling cause of their custom names ? I don't really know, I think it's a bug ?

Gaming

Programming

frontend navigation: null is not an object (evaluating '_el$11.nextSibling')