Gatsby assets getting fetched from wrong path on localized pages

Support
1

I have a localized gatsby site with multiple languages and so my build output tree looks like this:

image
image1234×1938 368 KB

Az you can see all the .js, .css assets are at the root and when I enter my site https://example.com, in the network tab I can see that indeed it gets all the assets successfully from https://example.com/asset-1.js etc. Same for https://example.com/make-a-reservation, it still gets the assets from https://example.com/asset-1.js

The issue is when I enter a localized version of any page, like https://example.com/hu/ or https://example.com/hu/make-a-reservation in both cases it tries to load the assets from https://example.com/hu/asset-1.js, which doesn’t exists - these assets only exist at the root.

I tried to explicitly define the assetPrefix to be https://example.com in the gatsby-config file, but it didn’t change the behaviour.

The end result should be that regardless of the page that I’m at, it should always get the assets relative to the root (https://example.com).

Any help is highly appreciated as this is a blocker now for the release and can’t figure it out on my own. Have a great day! :slight_smile:

2

Hey there, @electronic33 :wave:

Thanks for reaching out. Can you share your project repo with us? If not, can you share a repo that reproduces the issue you are seeing? This will help us look into your situation further. Thanks!

3

Hey @hillary ,

My schedule is really tight this week fixing the other things for the release, it would be a tremendous help if you could give a hint on how to fix it without a repo that reproduces the issue. If not, I totally understand that and I’ll try to create one later this week - the original is private.

Have a great day! :slight_smile:

4

Hey @electronic33,

If you could add a <base> tag to the <head> of your pages, it should work. Note that, it would modify the behaviour for all the relative links on your site.

5

Thank you for the suggestion, I was very optimistic about this - it makes sense that it should work, I added it correctly in the SSR phase, the tag appears in the header as seen in this screenshot with the full base url as the href value:

image
image1511×920 223 KB

But sadly, as you can see in the next screenshot, the assets are still being requested from the /hu/ prefixed url:

image
image1732×920 219 KB

6

!!!Update: I found out that when the nf_country cookie is set only then is this issue present. Hopefully that is a good hint for you aswell :slight_smile:

Edit 1:
P. S. I am using country based redirects with nf_country cookie when the language is switched - maybe that’s causing the issue when used with the Gatsby JS framework?

7

The weird part is, I’m not seeing those errors:

image
image3078×1406 475 KB

9

Are you having the nf_country=hu cookie? If you click on the “HU”, it should set it or you can set it manually as well. Please specify if you have the cookie set and you still get the assets correctly.

11

Hey @electronic33,

I was able to repro the issue by setting nf_country=hu cookie :+1:

In your site’s latest deploy 61def8d446ed8d0008f07e8f there’s a redirect rule that could be causing unintended behavior:

{
              "path" => "/*",
                "to" => "/hu/:splat",
            "status" => 302,
             "force" => true,
        "conditions" => {
            "Country" => "hu"

Would you please try removing that rule and let us know if that helped?

12

Hey,

I removed that rule and it works, but now I’ll need the country based redirect rules for every page - which is okay.

My desired outcome of the language redirect flow is described in this thread Custom language redirect logic

But it seems to be working like this, just need to add more specific redirect rules instead of the wildcard one, because that redirects the asset requests too as it seems.

Thank you! :slight_smile: