Translation not working when deployed to node express instance

[thealanreis]

Hello.

I'm using the latest version of qwik and qwik-speak. Qwik-speak was configured using the quick start guide and works great locally, but when I build and deploy to a node express server, the translation breaks when navigating to another page via Link (SPA).

Could you help me?

[robisim74]

Please provide more information:

1. Does it work locally using npm run preview?
2. Are you using the Inline plugin?
3. What is the version of node on your publishing server? If it is obsolete, it may not support dynamic import, see here

[thealanreis]

1. It doesn't
2. Not using inline, I've tried the plugin yesterday and everything works. Is this a requirement?
3. Using v16.20.0

I've made a minimalistic demo to showcase the problem: https://github.com/thealanreis/qwik-speak-error

Thank's

[robisim74]

Thanks for repro, now it is clear.

If you don't use the Inline plugin in production (not recommended) you have to use only the runtimeAssets in your app:

runtimeAssets: [
    'home',
    'examplea',
    'exampleb'
  ]

See https://robisim74.gitbook.io/qwik-speak/tools/inline

Then:

• you are loading the assets twice: as assets shared by all components in the configuration and through the use of the Speakcomponent (scoped)
• when you use the Speakcomponent, assets will only be available in child components, for example:

export default component$(() => {
  return (
    /**
     * Add Home translations (only available in child components)
     */
    <Speak assets={['home']}>
      <Home />
    </Speak>
  );
});

See https://github.com/robisim74/qwik-speak/discussions/44

[devagja]

@robisim74's solution has solved the problem for me.

However, I've noticed that when browsing on the client with Link, the waiting time has increased considerably. I have all the translations neatly separated in different JSON files to load only what I need. Anyways, I see that in the qwik speak demo the waiting time is good, so I attribute it to a bug in my coding

[robisim74]

@devagja What problem and solution are you referring to?

[devagja]

The problem is that the translations were not loaded when you browse through a Quick City Link component.

The solution has been to implement runtimeAssets where it is required to be loaded at runtime (SPA).

[robisim74]

No, it's not a solution: it was just an explanation on the specific case that didn't work. The Inline plugin must be used for production. runtimeAssets should only be used when translation values cannot be determined during build and are not needed for SPA mode. If you only use them, you reduce the app's performance.