Intl with vite-react-ts-swc. How to automatically inject message ID

51 Views Asked by At

I am using yarn create vite to create a new react-typescript project with vite. There are two options in the template:

  • @vitejs/plugin-react (Babel)
  • @vitejs/plugin-react-swc (SWC)

I want to automatically inject Intl message ID so this piece of code works:

intl.formatMessage({defaultMessage: "Hello World"})

instead of this: intl.formatMessage({id: hello.world, defaultMessage: "Hello World"})

With Babel, my vite.config.ts is:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            "formatjs",
            {
              idInterpolationPattern: "[sha512:contenthash:base64:6]",
              ast: true,
            },
          ],
        ],
        // Use .babelrc files
        babelrc: false,
        // Use babel.config.js files
        configFile: false,
      },
    }),
  ],
});

https://formatjs.io/docs/tooling/swc-plugin warns:

@formatjs/swc-plugin is not currently compatible with TypeScript due to swc-project/swc#4648. Attempting to compile a TypeScript codebase with the swc plugin will likely result in the error "Method visitTsType not implemented."

Is there a way to automatically inject ids using SWC ?

0

There are 0 best solutions below