Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
4 tasks done
LZTWilliam opened this issue Apr 17, 2024 · 3 comments
Labels
Status: Need More Info Lacks enough info to make progress

Comments

@LZTWilliam
Copy link

LZTWilliam commented Apr 17, 2024

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

@LZTWilliam LZTWilliam added the Status: Review Needed Request for review comments label Apr 17, 2024
@kazupon kazupon added Status: Need More Info Lacks enough info to make progress and removed Status: Review Needed Request for review comments labels Apr 17, 2024
Copy link

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
Copy link
Author

LZTWilliam commented Apr 17, 2024

@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
Copy link
Member

kazupon commented Apr 17, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Need More Info Lacks enough info to make progress
Projects
None yet
Development

No branches or pull requests

2 participants