S-link in s-app-nav not working after adding polaris.js

Polaris
1

Hey guys, I have a very simple setup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="shopify-api-key" content="{{ SHOPIFY_APP_API_KEY }}" />
    <title>shopify_test</title>
    <link rel="preconnect" href="https://cdn.shopify.com/" />
    <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
  </head>
  <body>
    <s-app-nav>
      <s-link href="/" rel="home">Home</s-link>
      <s-link href="/second">Second</s-link>
    </s-app-nav>

    not working:<br/>
    <s-link href="/second" target="auto">nothing happens</s-link><br/>
    <s-link href="/second" target="_self">nothing happens</s-link><br/>

    working:<br/>
    <s-link href="/second" target="_blank">works</s-link><br/>
    <s-link href="/second" target="_top">works</s-link><br/>
    <s-link href="/second" target="_parent">works</s-link><br/>
  </body>
</html>

If I remove the polaris.js the admin navigation an the left side works well. Each click on Home or Second creates a request on my server. After adding polaris.js no requests happen anymore, only the URL in the browser gets updated.

Also the <s-link> with target auto or _self do nothing with polaris.js loaded.

What do I miss? I also don’t understand if I have to use or if I can use as the documentation says here: Navigation

Or do I need a special “wrapper” or something to get the correct GET parameters or authentication header “Bearer …” into the requests?

Thanks so much for your help!

1 Like
2

How are you doing navigation in your app? Are you using a client side router or anything? :thinking:

3

Hi Jordan, I’m not doing anything more than what you can see in my template for the moment. I was just curious following the App home docs.

The <s-app-nav> is working as expected if I don’t load the polaris.js script. I can click an both menu points and i get an ?embedded=1 request to my server. But as soon as I add the polaris lib, it’s not working anymore and I don’t understand why this has an influence. Maybe it’s the same problem as in New Polaris web component `s-link` doesn't redirect

4

I have similar issue, managed to resolve it by using older <ui-nav-menu> component along with my router Link component. Here’s full example:

<ui-nav-menu>
  <Link to="/" rel="home">
    Home
  </Link>
  <Link to="/billing">Billing</Link>
</ui-nav-menu>
5

I can confirm that s-app-nav doesn’t seem to work with server-side rendered apps (no client-side routing). Haven’t tested witouth the polaris library included.

Navigation for server-side rendered apps has always been troublesome with AppBridge. I hope they can sort it out for good now.

@sspross this should work in your case even with polaris.js:

  <ui-nav-menu>
    <a href="/home" rel="home">Home</a>
    <a href="/second">Second</a>
  </ui-nav-menu>

It’s no longer documented but it’s the equivalent to s-app-nav.

6

Hi nunof, yes you are right, this works. but even this works:

<s-app-nav>
  <a href="/" rel="home">Home</a>
  <a href="/second">Second</a>
</s-app-nav>

But isn’t that strange behaviour? Is shopify working on this or whats going on here?

7

@sspross ah cool, didn’t know that s-app-nav was working with anchor tags.

Anyway, looks like a bug for sure. We would need someone from AppBridge or Polaris team to confirm. Side nav for server-side rendered multi-page apps has always been troublesome with some nasty production bugs in the past.

8

Hi @sspross - thanks for pointing this out! We recently shipped a change that should have addressed this. We try to handle navigation in single page apps with some of our Remix / React Router wrappers, but were incorrectly handling it with plain html as a result.

We shipped a change that should allow those links to work - let me know if it works for you!

9

@jason.addleman Where is this change? I updated @shopify/shopify-app-react-router to 1.0.0 and I’m still having issues with s-app-nav.

10

@jason.addleman I can confirm this is fixed. Thanks for the update.

11

@nunof glad to hear it worked!

@Beverly_Tang - can you paste in your s-app-nav code? The fix for this was in the polaris.js file that is loaded from our cdn, so it should’ve been shipped out to you automatically via that link. Can you elaborate on the specific issues you’re having?