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 ?