Translation issue with using vue-i18n.runtime.esm-bundler.js (CSP forced)

[Matti Lehmus]

Reporting a bug?

When using vue-i18n/dist/vue-i18n.runtime.esm-bundler.js the messages are not translated,
When using vue-i18n/dist/vue-i18n.esm-bundler.js they are translated correctly

I cannot use the version without runtime due to using CSP (I have removed it from my webpack config when reproducing this)

Expected behavior

Messages would be translated with both vue-i18n/dist/vue-i18n.runtime.esm-bundler.js and vue-i18n/dist/vue-i18n.esm-bundler.js correctly

Reproduction

Not working

console.log statements are not translated

import { createI18n } from 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'

const i18n = createI18n({
  locale: 'en',
  allowComposition: true,
  fallbackLocale: 'en',
  messages: {
    fi: {
      Password: 'Salasana',
    },
    sv: {
      Password: 'Lösenord',
    },
  },
})

i18n.global.locale = 'fi'
console.log(i18n.global.t('Password'))
i18n.global.locale = 'sv'
console.log(i18n.global.t('Password'))

export default i18n

Working

console.log statements are translated

import { createI18n } from 'vue-i18n/dist/vue-i18n.esm-bundler.js'

const i18n = createI18n({
  locale: 'en',
  allowComposition: true,
  fallbackLocale: 'en',
  messages: {
    fi: {
      Password: 'Salasana',
    },
    sv: {
      Password: 'Lösenord',
    },
  },
})

i18n.global.locale = 'fi'
console.log(i18n.global.t('Password'))
i18n.global.locale = 'sv'
console.log(i18n.global.t('Password'))

export default i18n

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Memory: 11.93 GB / 31.75 GB
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 7.22.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.121)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @intlify/unplugin-vue-i18n: ^2.0.0 => 2.0.0
    @intlify/vue-i18n-loader: ^5.0.0 => 5.0.0
    @vue/babel-preset-app: 5.0.8 => 5.0.8
    @vue/compiler-sfc: 3.4.14 => 3.4.14
    vue: 3.4.14 => 3.4.14
    vue-eslint-parser: 9.4.0 => 9.4.0
    vue-i18n: ^9.9.0 => 9.9.0
    vue-loader: ^17.3.1 => 17.3.1
    vue-localstorage: 0.6.2 => 0.6.2
    vue-style-loader: 4.1.3 => 4.1.3

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 Discussions

[Matti Lehmus]

This seems to be issue with the unplugin-vue-i18n instead of the runtime. There is a stackblitz demonstrating the issue I'm experiencing: https://stackblitz.com/edit/htmlplugin-t3ibcm?file=package.json

For some reason, I cannot use html-webpack-plugin and unplugin-vue-i18n together to precompile the messages to work with .runtime causing the translations not to work.

Same errors are shown in this ticket: intlify/bundle-tools#259

[Matti Lehmus]

Closing this issue in favor for the Plugin issue mentioned