ionic - IonBackButton failed to construct 'URL'

Question

I'm having a problem performing navigation for some pages using React + Ionic. One of the pages I want to access has a: "IonBackButton" (no text). But when I access this page, I get the following error:

When I delete the line where the IonBackButton is, the error disappears.

And if I run "router.goBack()" on the Foo page it works correctly (ie not lost history)

I tried 2 types of navigation for the page was, you will see in the code below, but the result is the same:

FooList:

const FooList: React.FC<RouteComponentProps> = ({ match }) => {
  const router = useIonRouter();
  const history = useHistory();
  const goToFoo = () => {
    router.push(`${match.url}/foo`, 'forward', 'push');
  };

  return (
    <IonGrid>
      <IonButton
        onClick={(e) => {
          e.preventDefault();
          history.push(`${match.url}/foo`);
        }}
      >
        Go to Foo 1
      </IonButton>
      <IonButton
        onClick={goToFoo}
      >
        Go to Foo 2
      </IonButton>
    </IonGrid>
  );
};

export default FooList;

FooPage (Where do I want the IonBackButton):

const Foo: React.FC<any> = () => {
  const router = useIonRouter();

  if (router.canGoBack()) {
    console.log("canBack")
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Foo</IonTitle>
          <IonButtons slot="start">
            <IonBackButton text="" icon="buttonIcon" />
          </IonButtons>
        </IonToolbar>
      </IonHeader>
    </IonPage>
  );
};

export default Foo;

Thank you all in advance.

The error in the console in the image appears to be related to fetching *some* image/icon asset and nothing to do with routing/navigation. If you click the link in the console where in the code is the error being thrown? Is `icon.js` code that belongs to you? — Drew Reese, Jul 31 '22 at 19:54
I saw it too, I think maybe it's about buttonIcon in the `IonBackButton` tag. But in the doc I never need to import a Icon to it. I will try to change an icon to prove it. — Lucas Raphael, Jul 31 '22 at 20:34
@DrewReese I removed the Icon and it's work. I will answer my own question. Thank you for your help! — Lucas Raphael, Jul 31 '22 at 20:40

score 0 · Accepted Answer · answered Jul 31 '22 at 20:51

With @DrewReese help,

I realized that the error seemed to be something related to the icon. I import the icon in the "ionBackButton" tag but this icon is not being found. Even using other ionic icons, it doesn't work there. Define the tag as:

<IonBackButton defaultHref='/foo' icon={undefined} />

And with that it displayed the default icon:

Thanks @DrewReese for your help.

ionic - IonBackButton failed to construct 'URL'

1 Answers1