Translation issue with using vue-i18n.runtime.esm-bundler.js (CSP forced)
lehmat opened this issue · comments
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
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
Closing this issue in favor for the Plugin issue mentioned