Shopify App - Embedded App Navigation Bar adding trailing slashes to links, makes Next.js 404

Retired Boards Appdev Tools
21

@hedgrh thanks so much! I’ll look into that.

It does appear to be fixed for now, but then again they said it was fixed before, so who knows how long it will be stable.

22

Since next now has the /api handlers there is little reason for koa, in there other than to fix thia, the other hacks won’t really work if you have any complexity to your state managment eg the _error page hack that people have used in next.

Basically this is the first time I have seen this trying to use the nav bar, but from the treads it seems to be a recurring issue, and if it’s likely to happen ongoing, I think the safest would be to to add the nav into the app. Maybe some one from Shopify can comment on if they are likely to switch to the enforced trailing slashes.

23

Hi @hedgerh ? Hanna here from the App Bridge team. Thank you and everyone here for your patience when it comes to our delayed response on this topic. This issue was a regression (made by me personally ?). Unfortunately, the bug was reintroduced in a complex part of App bridge that was undergoing changes. There were test cases to cover this issue, but the naming didn’t capture the key detail it was meant to cover. As a result, despite triple checking the changes, this case was handled incorrectly. The bug was fixed last Friday, but given the severity of the bug, it should have been fixed much sooner.

The team is in the process of renaming tests to be more clear of what’s expected in order to prevent this from happening again.

24

I fixed this issue by adding generic solution to my server.js.> > I am intercepting the request and remove the “/” except home or index route in embedded app. So I think this is generic way to resolve issue for all routes to fix this problem.

    router.get('*', verifyRequest(), async (ctx) => {
        if (ctx.url.slice(0, 2) != "/?") {
            ctx.url = ctx.url.replace("/?", "?");
        }
        await handle(ctx.req, ctx.res);
        ctx.respond = false;
        ctx.res.statusCode = 200;
    });

Let me know if any issue or problem, Thank you.

25

I fixed this issue by adding generic solution to my server.js.> > I am intercepting the request and remove the “/” except home or index route in embedded app. So I think this is generic way to resolve issue for all routes to fix this problem.

    router.get('*', verifyRequest(), async (ctx) => {
        if (ctx.url.slice(0, 2) != "/?") {
            ctx.url = ctx.url.replace("/?", "?");
        }
        await handle(ctx.req, ctx.res);
        ctx.respond = false;
        ctx.res.statusCode = 200;
    });

Let me know if any issue or problem, Thank you.