After upgrading from Webpack 4 to Vite 4.0.0 and updating react-intl to version 6.5.5, our Cypress tests are failing with the following error message:

Error: The following error originated from your application code, not from Cypress.

> [@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

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

this is how my lang.json file looks

{
"id": "message",
}

eg

{
"++9ROC": "Hello welcome to stack overflow",
}

Context
Vite Version: ^4.0.0
react-intl Version: ^6.5.5
Cypress Version: 12.17.3
cypress-vite Version: ^1.5.0

The error appears to be originating from the react-intl library, specifically from the formatMessage function. It suggests that an id must be provided to format a message and provides two potential solutions involving configuration changes to the build toolchain or ESLint.

I think cypress is using webpack somewhere and not vite even though I have specified in my cypress.config.js file

cypress config :

module.exports = defineConfig({
    component: {
        fixturesFolder: false,
        video: false,
        viewportWidth: 1920,
        viewportHeight: 1080,
        retries: {
            runMode: 4,
            openMode: 0,
        },
        defaultCommandTimeout: 20000,
        devServer: {
            framework: 'react',
            bundler: 'vite',
        },
        specPattern: 'src/**/__tests__/**/*.cypress.jsx',
        setupNodeEvents(on, config) {
            coverage(on, config);
            return config;
        },
    },
});

.babelrc file

plugins: [
    react({
        include: '@aap/**/*.{js,jsx}',
        babel: {
            babelrcRoots: '@aap/**',
            babelrc: true,
        },
    }),
    injectDefinitions({ presets, mode, buildEnv, skipPreset }),
    vitePluginRequire(),
    splitVendorChunkPlugin(),
    Inspect(),
    viteCompression(),
],

vite.config.js plugin config

plugins: [
            react({
                include: '@aap/**/*.{js,jsx}',
                babel: {
                    babelrcRoots: '@aap/**',
                    babelrc: true,
                },
            }),
            // commonjs(),
            injectDefinitions({ presets, mode, buildEnv, skipPreset }),
            vitePluginRequire(),
            splitVendorChunkPlugin(),
            Inspect(),
            viteCompression(),
        ],

I am looking for guidance on how to resolve this issue in the context of using Vite and Cypress. Specifically, I would like to know:

How to properly configure Vite to work with babel-plugin-formatjs or @formatjs/ts-transformer to ensure id is automatically provided for react-intl messages.

Any necessary changes to the Cypress configuration or setup to accommodate these changes.

Best practices for integrating these tools together to avoid similar issues in the future.

Any detailed steps or examples on how to implement these solutions would be greatly appreciated.