Stencil-Router is showing blank pageon Safari and Chrome but does work on Firefox and Edge

import { Component } from '@stencil/core';

  tag: 'blog-root',
  styleUrl: 'blog-root.css'

export class BlogRoot {
  render() {
    return (
        <header class="navbar">
          <stencil-route-link url="/">
            <section class="navbar-section">
              <p id="brand" class="navbar-brand mr-2">BanditoTR</p>
          <section class="navbar-section">
            <a id='github' href="" target="_blank">
              <ion-icon name="logo-github"></ion-icon>
            <a id='linkedin' href="" target="_blank">
              <ion-icon name="logo-linkedin"></ion-icon>
            <a id='twitter' href="" target="_blank">
              <ion-icon name="logo-twitter"></ion-icon>

          <stencil-route-switch scrollTopOffset={0}>
            <stencil-route url='/' component='table-of-contents' exact={true}></stencil-route>
            <stencil-route url='/blogid/:blogid/title/:title' component='blog-page'></stencil-route>
            <stencil-route url='/entry' component='blog-entry'></stencil-route>

Hi the snippet posted shows the component table-of-contents on Firefox and Edge but it doesn’t on Safari and Chrome. It shows a blank page.

If I comment the stencil-router it shows the < header > inside as it is supposed too.

The code is at
You can check the website at:

Issue was that axios was supposed to be declared for webkit rendering engines. I don’t even know why. I just remember that Jest was supported so I used that to find the issue

I am using axios in the index.html and not as a npm package.