Interpolations in production mode does not work

[gewisser]

Reporting a bug?

In dev mode, interpolation works as expected. Interpolation does not work in production mode.

In dev mode:

In prod mode:

translate:

template:

Expected behavior

In production, interpolation works the same way as in dev mode.

Reproduction

Create a quasar project with vue-i18n integration enabled. Install the latest version of vue-i18n (9.2.0-beta.37). Create a translation with named interpolation and build the project quasar build

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Xeon(R) CPU E5-2678 v3 @ 2.50GHz
    Memory: 42.90 GB / 63.84 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.9.0 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Chrome: 103.0.5060.114
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.49)
    Internet Explorer: 11.0.19041.1566

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion
• The provided reproduction is a minimal reproducible example of the bug.

quasarframework/quasar#13951

[gewisser]

Need to add: runtimeOnly: false

      vitePlugins: [
        [
          "@intlify/vite-plugin-vue-i18n",
          {
            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
            // compositionOnly: false,

            runtimeOnly: false,
            // you need to set i18n resource including paths !
            include: path.resolve(__dirname, "./src/i18n/**"),
          },
        ],
      ],

[tofi86]

We had the same issue and I can confirm that @gewisser's solution works.

Even better with runtimeOnly: ctx.dev as noted by @gewisser in quasarframework/quasar#13951

[kazupon]

close in activity

[klastarnstrom]

It is true that runtimeOnly: false can solve this problem. However, we are forced to be CSP-compliant and while it solves the problem with interpolation, it violates CSP.

Is there another way to solve this and remaining CSP compliant?

[13uraksahin]

I should not be forced to compromise on runtimeOnly and I also need to stay CSP compliant as mentioned above. and if I am not wrong there is still no fix with the beta updates up to 9.3.0.beta-17. So, I think this should be opened and fixed again @kazupon.

[nicooprat]

Seems to work without CSP violations when setting allowDynamic: false:

VueI18nPlugin({
  allowDynamic: false, // Prevents CSP violation with `new Function`
  runtimeOnly: false, // Keeps translations interpolation
}),

Of course we lose the ability to have functions as translations but we don't use them fortunately.

This is a workaround but an official solution would still be better...

Edit: looks like it doesn't work in all case, I thought the part of the code with new Function would still be there but never evaluated, but I was probably wrong. Our last chance is to use runtimeOnly: true by compiling translations in backend, but that's a lot of work for an upgrade :( https://github.com/intlify/vue-i18n-next/tree/master/examples/backend

[nicooprat]

We couldn't find any working workaround, so we had to revert our whole migration to vue-i18n-bridge. @kazupon I saw you just reopened the issue, any idea if this is something expected to be fixed?

PS. the special @ character was another deal breaker even if we found an acceptable workaround with some performances penalties; It would be great to be able to "choose" new features because we were pretty happy with v8 but are forced to migrate to v9 to update to Vue 3, but have no use of new features.

Anyway, thanks for your work ;)

[benlind]

I was able to solve this (getting translation interpolations without having to add "unsafe-eval" to my CSP) thanks to kazupon's comment in #1457:

1. Upgrade to "vue-i18n": "9.3.0-beta.24",
2. Upgrade to "@intlify/unplugin-vue-i18n": "^0.12.2",
3. Pass jitCompilation: true in my vite.config.ts:

    vueI18nPlugin({
      // This is necessary in order to use i18n parameter interpolation without
      // having to put "unsafe-eval" in our CSP:
      // https://github.com/intlify/vue-i18n-next/issues/1457
      jitCompilation: true,
    }),

[nicooprat]

For the record, the @intlify/unplugin-vue-i18n plugin is not required (we dynamically serve translations through an API for instance), you can also add define: { INTLIFY_JIT_COMPILATION: true } in vite.config.ts.

PS. In the end, we didn't use the bridge package at all. We upgraded to version 9 along with Vue 3, and monkey patched what didn't work, like $t() which doesn't access nullish values anymore 🤷 (which is not documented by the way).

[codersjj]

I was able to solve this (getting translation interpolations without having to add "unsafe-eval" to my CSP) thanks to kazupon's comment in #1457:

1. Upgrade to "vue-i18n": "9.3.0-beta.24",
2. Upgrade to "@intlify/unplugin-vue-i18n": "^0.12.2",
3. Pass jitCompilation: true in my vite.config.ts:

    vueI18nPlugin({
      // This is necessary in order to use i18n parameter interpolation without
      // having to put "unsafe-eval" in our CSP:
      // https://github.com/intlify/vue-i18n-next/issues/1457
      jitCompilation: true,
    }),

Thank you for @benlind's solution.
Now we can upgrade @intlify/unplugin-vue-i18n to v3+. In this version, the jitCompilation option defaults to true.
See: https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#jitcompilation

[kazupon]

close by jitCompilation

[chrissyast]

@benlind

3. Pass jitCompilation: true in my vite.config.ts:

    vueI18nPlugin({
      // This is necessary in order to use i18n parameter interpolation without
      // having to put "unsafe-eval" in our CSP:
      // https://github.com/intlify/vue-i18n-next/issues/1457
      jitCompilation: true,
    }),

Is there an equivalent to this config using Quasar?

[chrissyast]

Is there an equivalent to this config using Quasar?
Managed to achieve this by doing the following...

//quasar.config.js
       
      build: {
            rawDefine: {
                __INTLIFY_JIT_COMPILATION__ : true
            }
      }