Cannot read data on non-home page with i18n plugin

leamoser commented 1 year ago

Technologies used: Nuxt 3, Storyblok, i18n, SSG on Netlify

I am creating a multilingual site with nuxt 3, storyblok (storyblok/nuxt) and i18n (nuxtjs/i18n). I want to deploy the site fully static to Netlify in the end. And that’s the point I’m having troubles. Locally everything works fine. But as soon as I render the page and preview it, I’m having the issue that if I reload (normal reload or hard reload) on a page that is not home a breaking error occurs.

If I reload on home, it works smoothly. I can even navigate to all the other pages and see it without breaking, the error occurs only if reloading.

I already discussed this issue with someone on the storyblok discord channel. We analyed some stuff already and came to the conclusion that the issue is not the nuxt/i18n plugin but rather the storyblok/nuxt plugin.

Expected Behavior

When reloading any page of the generated output, the content of the page should be displayed without any errors and without fetching from the API, as it should be a fully static page.

Current Behavior

If reloading the generated page on a "non-home" page (e.g. /en, /blog, /en/blog) the page completly breaks and a error occurs in the console (screenshot above).

Steps to Reproduce

Clone or fork this repo with the current non-working state: https://github.com/leamoser/multilang_nuxt_3
Create a .env-file on the root-layer with the following content: STORYBLOK_ACCESS_TOKEN=ysgOxxe8kUQvRK3R539XhAtt
Generate with yarn generate
Preview with yarn preview
Reload or hard reload on any page expect home

mariuscdejong commented 1 year ago

Might be the same as https://github.com/storyblok/storyblok-nuxt/issues/211

Experiencing this issue on sites built without i18n/multi-lang as well, so I don't think it has to do with this i18n plugin.

leamoser commented 1 year ago

@mariuscdejong: I just solved the issue. Could indeed be related to #211.

Generate locally: For me if previewing the site locally (after running yarn generate) and then working with the command npx serve .output/public instead of yarn preview did the trick.

Generate on Netlify: For it to be working on Netlify, I had to implement a middleware that checks the route that I want to redirect to and remove the slash from the end if there is one. Idk. where these slashes came from (beacause all my links do not have slashes at the end, e.g. /blog not /blog/), but removing them if they occur solved the issue for me.

middelware/routewatcher.global.ts

Dawntraoz commented 1 year ago

Hi @leamoser, first of all, happy new year! Thanks for reporting your issue and sharing the solution you found! 💜

Locally: as Daniel Roe from the Nuxt core team pointed out in our last chat, we should use npx serve .output/public for static sites indeed. There's a problem they need to solve on the preview command. Maybe it's worth it to leave a comment about it on the README of the SDK? Let me know your thoughts.

Netlify generation: Something that Daniel pointed out too, Netlify is expecting a trailing slash at the end always so the routes should be generated accordingly. I have a repo for a workshop working with a similar setup; as you can see in this example, in every link, I did the hacky thing for slashes https://github.com/Dawntraoz-Storyblok/storyblok-nuxt-jamstack-blog/blob/main/components/ArticleCard.vue, I know is annoying, but at least your middleware seems a cleaner solution, I will try to look for a better approach once we solve the priority issues.

PS: Take into account that these SDKs are helpers we create voluntarily in order to make devs' life easier, but we don't have a dedicated person or team to maintain them yet. I promise we will do our best while working on other tasks, but any help in the form of a PR is more than welcome and will help us a lot! 🚀

Thanks again for your help Leamoser 💜

storyblok / storyblok-nuxt