Why qwik-speak works fine in dev mode but doesn't work in production?

[LuisJoseSanchez]

Hi all! I am using qwik-speak in my new project. Thank you @robisim74 for the fantastic job creating this library 🦾

In dev mode (npm run dev), every translation works fine for me. Here is an screenshot:

But in production mode (npm run preview), all dynamic translations fail:

After some research in the docs, I realised that qwik-speak does compiletime translation by default in production mode but you can change it. So, I tried to configure it (unsuccessfully 😫 ).

This is my speak-config.ts:

import type { SpeakConfig } from 'qwik-speak';

export const config: SpeakConfig = {
  defaultLocale: { lang: 'en-US', currency: 'USD', timeZone: 'America/Los_Angeles' },
  supportedLocales: [
    { lang: 'es-ES', currency: 'EUR', timeZone: 'Europe/Madrid' },
    { lang: 'ru-RU', currency: 'RUB', timeZone: 'Europe/Moscow' },    
    { lang: 'en-US', currency: 'USD', timeZone: 'America/Los_Angeles' }
  ],
  assets: [
    'app' // Translations shared by the pages
  ],
  runtimeAssets: [
    'testimonials' // Translations with dynamic keys or parameters
  ]
};

I pass the runtime assets in testimonials.tsx:

<Speak runtimeAssets={["testimonials"]}>
  <TestimonialCard testimonialId={selectedTestimonialId.value}/>
</Speak>

And try to do dynamic translation testimonial-card.tsx

<h3 class="text-2xl font-bold">
  {t(`testimonials.0${testimonialId}_name`)}
</h3>

But it doesn't work in production mode.

What I am doing wrong?

[robisim74]

Hi @LuisJoseSanchez ,

that's weird, it should work (even if you don't need to load twice testimonials as runtime asset in both the config and the Speak component).

Please:

• could you post qwik-speak-inline.log file generated after the build?
• if your page is loaded through a SPA navigation, could you check in browser network if testimonials.json (?qfunc=) is loaded?
• instead, if your page is SSR loaded, could you add in your testimonial-card.tsx the following code:

 const translation = useSpeakContext().translation;
 console.log(translation);

and check in production if testimonials data are loaded?

[LuisJoseSanchez]

Hi @robisim74 ,

Thank you very much for your answer.

• I can't find qwik-speak-inline.log in my whole file system. Where is supossed to be that file?
• No file called testimonials.json is loaded, just a bunch of js files (in prod mode) and some tsx (in dev mode).
• I added those two lines in my testimonial-card.tsx and got the following output:

{
  'es-ES': {
    app: { currentlang: 'es', slogan: 'Portadas Originales para Libros' },
    default: { testimonials: [Object] },
    testimonials: {
      '01_about': 'La autora del libro "Agosto del dos mil" y muchos otros.',
      '01_name': 'Tatiana Gubonyi',
      '01_testimonial': '¡La portada para mi libro es increíble! La diseñadora combina hábilmente diferentes fotografías en una sola obra artística. La forma en que éstas se entrelazan con el texto muestra una verdadera maestría. El resultado es una imagen que no sólo intriga al lector, sino que captura la esencia de la propia historia.',
      '02_about': 'La autora de los libros "Cuando yo era musa" y "25 orgasmos, y uno es mio", entre otros.',
      '02_name': 'Maksi Fey',
      '02_testimonial': 'Si necesitas un enfoque diferente, si buscas no solo la profesionalidad, sino que también las emociones positivas al participar en el proceso creativo, entonces ECOVERED DESIGN es para ti. El trabajo que ha realizado Elena para mis libros me ha quitado el aliento, ¡muchas gracias!',
      '03_about': 'Profesor y programador, autor de varios manuales técnicos.',
      '03_name': 'Luis José Sánchez',
      '03_testimonial': 'Un libro es el fruto de mucho tiempo y esfuerzo y se merece la mejor portada posible. Elena, de ECOVERED DESIGN, hace un trabajo fantástico. Su atención al detalle no tiene límites y sabe darle un toque original a cada una de sus creaciones.',
      '04_about': 'Autora de los libros "Dibujando Italia" y "Camaleón y mariposa", entre otros.',
      '04_name': 'Tatiana Gracheva',
      '04_testimonial': 'La portada de mi libro es original y llena de color, empapada de sol, felicidad y sueños por cumplir ¡Parece que incluso puedo oler el aroma de las flores representadas en ella. ¡Gracias por el precioso envoltorio para mi novela!',
      '05_about': 'Autora de los libros "La casa de ladrillo rojo" y "La torre de marfil", entre otros.',
      '05_name': 'Natalia Tsareva',
      '05_testimonial': 'Las portadas de ECOVERED DESIGN siempre atraen la atención y se quedan en la memoria. Cada detalle de la composición es cuidadosamente elegido y trabajado. A eso hay que añadir el enfoque responsable y el trato amigable que se ofrece aquí. ¡Muchas gracias por el trabajo realizado!',
      '06_about': 'Autor del libro "El cacharro" y muchos otros.',
      '06_name': 'Dmitriy Fantast',
      '06_testimonial': 'Un libro siempre es recibido por su portada, por lo que es un don y una habilidad especial del diseñador: con su arte crear un estado de ánimo. La portada de ECOVERED DESIGN le da un carácter único a mi relato y todavía me hace sentir la calidez de las manos de su diseñadora.'
    },
    covers: {
      book_author: 'Autor(a) del libro: ',
      picture: 'Foto para la portada: ',
      '01_author': 'Elena Kozina',
      '01_picture': 'ECOVERED DESIGN',
      '01_title': 'Corazón de menta',
      '02_author': 'Elena Kozina',
      '02_picture': 'Brigitte Werner (ArtTower), Wendy Corniquet (WenPhotos), Nicole Köhler (Nikiko)',
      '02_title': 'El incomparable Jimmy Wood',
      '03_author': 'Maksi Fey',
      '03_picture': 'Adquirida por la cliente',
      '03_title': '25 orgasmos, y uno es mio',
      '04_author': 'Tatiana Gubonyi',
      '04_picture': 'Reiner (Zotx), Nicolas Debray (nicolasdebraypointcom), Nika Akin',
      '04_title': 'Agosto del dos mil',
      '05_author': 'Dmitriy Fantast',
      '05_picture': 'Clker-Free-Vector-Images (Pixabay),  Flaticon',
      '05_title': 'El cacharro',
      '06_author': 'Tatiana Gracheva',
      '06_picture': 'Albrecht Fietz (fietzfotos), MrsPigg',
      '06_title': 'Dibujando Italia',
      '07_author': 'Maksi Fey',
      '07_picture': 'Adquirida por la cliente',
      '07_title': 'Cuando yo era musa',
      '08_author': 'Luis José Sánchez',
      '08_picture': 'senjakelabu29',
      '08_title': 'Mis primeros pasitos con Angular',
      '09_author': 'Natalia Tsareva',
      '09_picture': 'Momentmal, Micky Dunn (Taut)',
      '09_title': 'La casa de ladrillo rojo',
      '10_author': 'Elena Kozina',
      '10_picture': 'Niklas Ernst, Christoph',
      '10_title': 'Pensamientos al viento',
      '11_author': 'Natalia Tsareva',
      '11_picture': 'Gábor Adonyi (adonyig), wertyfy2, Kiều Trường (kieutruongphoto)',
      '11_title': 'La torre de marfil',
      '12_author': 'Luis José Sánchez',
      '12_picture': 'ECOVERED DESIGN',
      '12_title': 'Apuntes de Javascript de ES6 a ES10. Ejemplos prácticos de las últimas versiones.',
      '13_author': 'Tatiana Gracheva',
      '13_picture': 'anSICHThoch3, Alexas_Fotos, wertyfy2',
      '13_title': 'Camaleón y mariposa',
      '14_author': 'Anna Evdo',
      '14_picture': 'ECOVERED DESIGN',
      '14_title': 'El secreto del quinto océano',
      '15_author': 'EMPTY',
      '15_picture': 'LUM3N, Nandhu Kumar (nandhukumar), сток Pixabay',
      '15_title': 'Portada disponible para libro electrónico',
      '16_author': 'Tatiana Gubonyi',
      '16_picture': 'Reiner (Zotx), Nicolas Debray (nicolasdebraypointcom), Nika Akin',
      '16_title': 'Portada impresa para "Agosto del dos mil"',
      '17_author': 'EMPTY',
      '17_picture': 'Peter H (Tama66)',
      '17_title': 'Diseño de postal "La Catedral de San Isaac de San Petersburgo"',
      '18_author': 'EMPTY',
      '18_picture': 'Andrew Martin (aitoff), Valentin Nourry (valentinnourry)',
      '18_title': 'Portada disponible para libro impreso'
    }
  },
  'ru-RU': {},
  'en-US': {}
}

[robisim74]

I can't find qwik-speak-inline.log

After npm run preview it should be in the root of your project. Are you using Qwik Speak Inline plugin? https://robisim74.gitbook.io/qwik-speak/tools/inline

However your runtimeAssets seems loaded and should work.

It might depend on your environment (node + vite versions): could you try changing any of your keys using a valid variable name in javascript?

For example from:

04_name': 'Tatiana Gracheva'

to:

name04': 'Tatiana Gracheva'

and then:

<h3 class="text-2xl font-bold">
  {t(`testimonials.name0${testimonialId}`)}
</h3>

[LuisJoseSanchez]

Thank you again. I didn't have Qwik Speak Inline plugin, so I followed your link. Nevertheless after having it configured, the translation didn't work either.

Trying random/desperate/non-logical things, I found a solution but I don't know if it is a good practice as I am very new to Qwik and I don't know how it works exactly (things running sometimes in the server, sometimes in the client and all this stuff).

In package.json, I chaged this line:

"build.preview": "vite build --ssr src/entry.preview.tsx",

into this:

"build.preview": "vite build --mode ssr --ssr src/entry.preview.tsx",

And magically all the dynamic translations work perfectly.

[robisim74]

Yes, it works because you are building the app, but with --mode ssr it's running in dev mode! Please avoid this!

There must be another reason: can you carefully verify that - when you switched to runtimeAssets, you didn't leave testimonials also in the assets somewhere else? Verify that the assets of the configuration do not contain testimonials, and neither the assets of the Speak components (by the way: only one Speak component per page is sufficient)

Also check that the same keys are not in other assets file.

Indeed, everything that is in assets, in production is not serialized, and is inlined via Inline plugin, except the runtimeAssets.

Let me know.

[LuisJoseSanchez]

There must be another reason: can you carefully verify that - when you switched to runtimeAssets, you didn't leave testimonials also in the assets somewhere else?

That was the key! I left testimonials in assets when I was refactoring, so it was at the same time in asset and runtimeAssets Problem solved!

Thank you very much for your patiente and all your useful tips!!!

[robisim74]

Glad to know! I think I'll add a warning in the library to warn of any asset conflicts