FormatJS/vue-intl with Vue 3 and Vite

[mrcrazylee]

I am trying to use vue-intl for my Vue project that is set up with Vite. Currently I am running into an issue when I try to auto-generate id's for messages. Although all goes well with formatjs-cli (extraction), I can't get it to work in the dev server.

The code:

 {{ $formatMessage({ defaultMessage: 'This is a test' }) }}

ESLint config:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
    root: true,
    env: {
        node: true,
    },
    extends: [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
        '@vue/eslint-config-typescript',
        'prettier'
    ],
    plugins: ['formatjs', 'prettier'],
    parserOptions: {
        ecmaVersion: 'latest',
    },
    overrides: [
        {
            files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
            env: {
                jest: true,
            },
        },
    ],
    rules: {
        ...
        'formatjs/enforce-id': [
            'error',
            {
                idInterpolationPattern: '[sha512:contenthash:base64:6]',
            },
        ],
    },
};

The error in the console:

ils.js:76 Uncaught (in promise) Error: [@formatjs/intl] An `id` must be provided to format a message. You can either:
1. Configure your build toolchain with [babel-plugin-formatjs](https://formatjs.io/docs/tooling/babel-plugin)
or [@formatjs/ts-transformer](https://formatjs.io/docs/tooling/ts-transformer) OR
2. Configure your `eslint` config to include [eslint-plugin-formatjs](https://formatjs.io/docs/tooling/linter#enforce-id)
to autofix this issue
    at invariant (utils.js:76:15)
    at formatMessage (message.js:31:5)
    at Proxy._sfc_render (SubscriptionOverview.vue:134:8)
    at renderComponentRoot (runtime-core.esm-bundler.js:914:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5649:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
    at instance.update (runtime-core.esm-bundler.js:5763:56)
    at setupRenderEffect (runtime-core.esm-bundler.js:5777:9)
    at mountComponent (runtime-core.esm-bundler.js:5559:9)
    at processComponent (runtime-core.esm-bundler.js:5517:17)

This makes sense. Normally you would transform/generate id's using ts-loader or babel, but with Vite that is not really an option as far as I know. Is it at all possible to automatically generate id's with vue and vite? I am really not keen on creating manual id's.

I will create a repro if that helps.

[longlho]

You can use our eslint-plugin-formatjs and it'll inject IDs when u run lint

[mrcrazylee]

Thank you very much for your response and hard work! I think something was wrong with the vscode/eslint setup. I was already using the plugin with autfix on save, but it did not inject the ID's on save. Running the linter manually one time now also seems to have fixed the autofix on save issue. I will dig a bit deeper into this.