search

nuxt-modules / i18n

I18n module for Nuxt
https://i18n.nuxtjs.org
MIT License
1.72k stars 477 forks source link

Fetch messages via api works on dev but not in production. May cause of experimental flag ? #2582

Closed devonik closed 10 months ago

devonik commented 10 months ago

Environment

Reproduction

Load lazy messages defineI18nLocale via as described in https://i18n.nuxtjs.org/guide/lazy-load-translations. Section with the $fetch. Stackblitz: https://stackblitz.com/edit/nuxt-starter-jph9u1?file=nuxt.config.ts

Describe the bug

On local it works. See StackBlitz as example. But when I deploy it on my production machine (node 18) i cannot reach any site and the error layout is called with message: nuxt Cannot read properties of undefined (reading 'source') This has anything to do with the $fetch. I am loading the ts file with return json now and this works well.

But it would be awesome to fetch an api for that

Additional context

This still only works when i set experimental.jsTsFormatResource to true.

Logs

No response

devonik commented 10 months ago

Beside this error. Is this still experimental ?

BobbieGoede commented 10 months ago

In the edge channel jsTsFormatResource has moved from experimental to stable, the feature is enabled without configuration. Unfortunately the docs are up to date with the edge channel, so while this option is still experimental in rc.5 the documentation has already been removed.

We should publish a new rc release, but in the meantime you can either use the edge channel or enable the functionality using experimental.jsTsFormatResource option as you already have.

devonik commented 10 months ago

Yes in development mode its work fantastic. But in the production build there is a nuxt error (and this happen only if I use this fetch method). [nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'source') at createCodeGenerator (./.output/server/chunks/app/server.mjs:3359:21) at generate (./.output/server/chunks/app/server.mjs:3516:21) at baseCompile$1 (./.output/server/chunks/app/server.mjs:3546:10) at baseCompile (./.output/server/chunks/app/server.mjs:4363:15) at compile (./.output/server/chunks/app/server.mjs:4374:34) at compileMessageFormat (./.output/server/chunks/app/server.mjs:4492:15) at translate (./.output/server/chunks/app/server.mjs:4427:45) at ./.output/server/chunks/app/server.mjs:5128:46 at wrapWithDeps (./.output/server/chunks/app/server.mjs:5112:13) at Proxy.t (./.output/server/chunks/app/server.mjs:5128:12)

You can reproduce it when you do npm run build and open the page. I think it has to be done on a local machine and not doable on the stackblitz website. Maybe it have smth to do with the SSR mode. Can you may imagine why this fetching does produce this error for the nuxt server, only in production mode

BobbieGoede commented 10 months ago

Hmm I'm unable to reproduce this locally using the stackblitz project, maybe your local project is using different dependency versions?

Can you try and see if you're getting this issue after installing the edge channel as well?

devonik commented 10 months ago

hm strange youre right. The stackblitz production build on local works. I am using nuxt 3.7.4 in my project but even with that the stackblitz project runs :/ will have to dive deeper

devonik commented 10 months ago

Seems to be because i am fetching a route that is added to the server by a module https://github.com/devonik/nuxt-i18n-data. When I create the server route directly in the project it works :/ So thanks for having a look

devonik commented 10 months ago

@BobbieGoede Since this works now with a nuxt server endpoint i am interested in the caching. In the docs there is this statement "By default caching is enabled for static files, and disabled for files that return messages via a function." https://i18n.nuxtjs.org/guide/lazy-load-translations#caching

Can enable cache when I use a function ? There are only examples with cache false { path: 'es.js', cache: false }.

BobbieGoede commented 10 months ago

Sure you can enable it by setting { path: 'es.js', cache: true }, this is disabled by default because I often see users using 1 file/function for multiple locales, it would return the first cached result of the function.

devonik commented 10 months ago

Okey got it. I did it also cause it looked like it can be one function for all :D since there is a parameter option. So create a file with same function for each language with cache on true then it should work ? Would be a nice example in your documentation 👍 Thank you

devonik commented 10 months ago

Sure that this works or is it maybe not on the edge release ? I get a typescript error that file can only be a string.

BobbieGoede commented 10 months ago

It should work, I suspect this is a type merging issue in the module as I have run into it before, can you check if it works as expected when ignoring the typescript error with // @ts-ignore? I will be looking into the type issue, so it would only be a temporary workaround. Otherwise I think using a files array instead should also work without type errors, let me know.