TypeError: Cannot set properties of null (setting '__VUE_I18N__')

Reporting a bug?

When loading a component tree which interacts with vue-i18n the library throws an error. I don’t completely understand what conditions are necessary to reproduce this issue, it only happens in one place in our application.

We started noticing this after upgrading to 9.2.0-beta.17

TypeError: Cannot set properties of null (setting '__VUE_I18N__')
    at Proxy.mounted (vue-i18n.esm-bundler.js:1930)
    at callWithErrorHandling (runtime-core.esm-bundler.js:154)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:163)
    at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js:1953)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:355)
    at flushJobs (runtime-core.esm-bundler.js:391)

The line of code is:

mounted() {
  /* istanbul ignore if */
  if (((process.env.NODE_ENV !== 'production') || __VUE_PROD_DEVTOOLS__) && !false) {
    this.$el.__VUE_I18N__ = this.$i18n.__composer; // HERE

this.$el is null

Expected behavior

The library fails gracefully

Reproduction

I don’t understand how to reproduce this problem, it’s an access error caused internally by the library

System Info

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 73.94 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.2/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.2/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Firefox: 89.0
    Safari: 15.0
  npmPackages:
    @vue/babel-preset-app: ^4.4.6 => 4.5.12 
    @vue/compiler-sfc: ^3.0.0-beta.18 => 3.0.11 
    @vue/test-utils: ^2.0.0-beta.0 => 2.0.0-rc.6 
    vue: ^3.0.0 => 3.0.11 
    vue-draggable-next: ^2.0.1 => 2.0.1 
    vue-i18n: ^9.2.0-beta.19 => 9.2.0-beta.19 
    vue-loader: ^16.0.0-beta.4 => 16.2.0

Screenshot

No response

Additional context

I’ve forked the library and fixed the problem like this, no idea what side effects this will have though

Before:

this.$el.__VUE_I18N__ = this.$i18n.__composer;

After:

if (!this || !this.$el) return
this.$el.__VUE_I18N__ = this.$i18n.__composer;

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

[virgosoy]

This bug production when I used <script setup> + await. I found same issue in https://github.com/kazupon/vue-i18n/issues/1234

[kazupon]

I seem that is another issue. you can open a new issue.