Single File Component doesn't work anymore

[fivaz]

Reporting a bug?

I copied step by step the code in your README but it doesn't work.

the translation works fine if we use a message object, but as soon as we use the tag, it doesn't work, and I see the error in the console:

[vue-i18n] Value of key 'hello' is not a string or function ! [vue-i18n] Cannot translate the value of keypath 'hello'. Use the value of keypath as default.

I have tried to make this work, with webpack, vue-cli, etc. but it just doesn't work, at least not with just the steps in the documentation.

Expected behavior

Instead of hello which is the name of the key it should show the value of this key, so "hello world!" or "こんにちは、世界！"

Reproduction

https://codesandbox.io/s/brave-water-spm7l4

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12600K
    Memory: 3.92 GB / 15.78 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (99.0.1150.46)
    Internet Explorer: 11.0.22000.120

Screenshot

Additional context

No response

Validations

• [X] Read the Contributing Guidelines
• [X] Read the Documentation
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion
• [X] The provided reproduction is a minimal reproducible example of the bug.

[axetroy]

any solution for this?

[axetroy]

write a new loader, and it works for me.

const parse = require('querystring').parse
const JSON5 = require('json5')

module.exports = function (source, map) {
    let { lang } = parse(this.resourceQuery)

    // eslint-disable-next-line unused-imports/no-unused-vars
    lang = lang || 'json'

    let pureJSONStr = ''

    try {
        const obj = JSON5.parse(source)

        pureJSONStr = JSON.stringify(obj)
    } catch (err) {
        const e = new Error(`Invalid i18n block: \n${source}`)
        this.emitError(e.message)
        this.callback(e)
        return
    }

    this.cacheable && this.cacheable()

    this.callback(
        null,
        `
export default function (Component) {
  Component.options.__i18n = Component.options.__i18n || [];
  Component.options.__i18n.push('${pureJSONStr}');
  delete Component.options._Ctor;
}`.trim(),
        map
    )
}

        config.module
            .rule('i18n')
            .resourceQuery(/blockType=i18n/)
            .type('javascript/auto')
            .use('i18n')
            .loader(path.resolve('./tools/webpack-loader/i18n-loader.js'))
            .end()