intlify/vue-i18n

Getting 'Cannot read properties of undefined (reading 't')' error in core-base.mjs::formatParts

LZTWilliam opened this issue · 4 comments

LZTWilliam commented

Reporting a bug?

After upgrading vue-i18n from 9.2.2 to 9.10.1, and run my application in production mode, I get error while calling i18n.t API as below.

import i18n from 'somewhere createI18n'
i18n.global.t('my_i18n_key')

image

For now, I locating the difference between the scenario is in the function messageCompiler in core-base.mjs.

  1. Before upgrading
    messageCompiler returns new Function(`return ${code}`)() which directly returns my translated message (which is a plain string)
    image

  2. After upgrading, dev mode
    messageCompiler returns () => message which also returns translated message directly
    image

  3. After upgrading, production mode
    messageCompiler returns format(message) which leads to (ctx) => formatParts(ctx, ast). And when formatParts is invoked, the parameter ast is just my message string, which cause the error report.
    image

Is this the expected behavior? Or should I do some other configuration to allow my plain text is properly translated?

Expected behavior

No error occurs

Reproduction

Still trying. No nuxt, no SSR in my case

System Info

System:                                                
    OS: Windows 10 10.0.19045                            
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 6.47 GB / 31.84 GB                           
  Binaries:                                              
    Node: 18.14.1 - D:\Program Files\nodejs\node.EXE     
    npm: 8.19.4 - D:\Program Files\nodejs\npm.CMD        
  Browsers:                                              
    Chrome: 122.0.6261.129
    Edge: Chromium (123.0.2420.81)
    Internet Explorer: 11.0.19041.3636

Screenshot

No response

Additional context

No response

Validations

github-actions commented

Thank you for your feadback!
Would you be able to provide a reproduction 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If Status: Need More Info labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 Reproduction mininal starter
👉 Reproduction starter with unpluguin-vue-i18n

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible.

You might also find these other articles interesting and/or helpful:

LZTWilliam commented

@kazupon While working on minimal production I find wierd thing. The message compiler registration is different between vue-i18n.cjs and vue-i18n.mjs

// vue-i18n.mjs
// register message compiler at vue-i18n
if (__INTLIFY_JIT_COMPILATION__) {
    registerMessageCompiler(compile);
}
else {
    registerMessageCompiler(compileToFunction);
}

// vue-i18n.cjs
// register message compiler at vue-i18n
{
    coreBase.registerMessageCompiler(coreBase.compile);
}

In my minimal reproduction project the mjs file is invoked, and run registerMessageCompiler(compileToFunction);, everything alright.
In my production project the cjs file is invoked(maybe because of webpack and babel?), the compiler is different from the one registered in mjs.

Shouldn't the code be same in mjs and cjs? Does the cjs lack the (__INTLIFY_JIT_COMPILATION__) branch? Looking for reply, thx.

Reproduction

Just require the vue-i18n.cjs can reproduct this issue

kazupon commented

Thank you for your reporting!

Just require the vue-i18n.cjs can reproduct this issue

I think that you don't setup @intlify/unplugin-vue-i18n
You can setup with it.
https://vue-i18n.intlify.dev/guide/advanced/sfc.html#configure-plugin-for-webpack

your project uses Vue CLI, this documentation will be helpful.
https://cli.vuejs.org/guide/webpack.html#simple-configuration

LZTWilliam commented

Finally found an alias resolving setting in my vue.config.js. Not sure why.

'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',

Remove this line and my project works fine.
Thanks again for your reply!!