formatjs / formatjs

The monorepo home to all of the FormatJS related libraries, most notably react-intl.

Home Page:https://formatjs.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

@formatjs/swc-plugin-experimental incompatible with latest SWC core version

younessbella opened this issue · comments

Which package?

@formatjs/swc-plugin-experimental

Describe the bug

Recognizing that this is the result of the SWC team introducing breaking changes from regularly updating their @swc/core package, the @formatjs/swc-plugin-experimental will fail to invoke in any repository running a version later than @swc/core@1.3.57, as described by compatibility entry. The current stable version of the @swc/core library is 1.4.17 which makes it difficult to integrate this plugin in up-to-date repositories.

To Reproduce

Codesandbox URL

Here is a Codesandbox running a very simple SWC project with with @swc/core being bumped to the next patch version (1.3.58). The application fails to start or build due to the swc_core mismatch.

Reproducible Steps/Repo

Steps to reproduce the behavior:

  1. Setup a repository to use SWC as the compiler (the vite React template is a good start)
  2. Install the latest @formatjs/swc-plugin-experimental
  3. Configure as a plugin to the SWC compiler
  4. Execute a build or start

For reference, here is the Vite config file that I was using when I found the issue along with the package.json

Click me

Vite Config

import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [
    react({
      plugins: [
        [
          '@formatjs/swc-plugin-experimental',
          {
            ast: true,
            idInterpolationPattern: '[sha512:contenthash:base64:6]'
          }
        ]
      ]
    })
  ],
  server: {
    port: 3000
  }
});

package.json

{
"name": "lens",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
  "build": "tsc && vite build",
  "dev": "vite"
},
"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-intl": "^6.6.5",
  "react-router-dom": "^6.22.3"
},
"devDependencies": {
  "@formatjs/swc-plugin-experimental": "^0.3.7",
  "@types/react": "^18.2.79",
  "@types/react-dom": "^18.2.25",
  "@types/react-router-dom": "^5.3.3",
  "@vitejs/plugin-react-swc": "^3.6.0",
  "vite": "^5.2.10"
}
}

Expected behavior

The main motivation to use this plugin is to generate unique IDs for all my messages and to incorporate this at build time, instead, my application fails to build or run due to the mismatched SWC plugin version.

Screenshots

Here is the output of the failing plugin during compilation in my Vite project

Click me

Vite Config

  thread '<unnamed>' panicked at /Users/runner/.cargo/registry/src/index.crates.io-6f17d22bba15001f/swc-0.272.4/src/plugin.rs:162:14:
failed to invoke plugin: failed to invoke plugin on 'Some("/Users/{USERNAME}/Developer/lens/src/main.tsx")'

Caused by:
    0: failed to invoke `/Users/{USERNAME}/Developer/mypremise/node_modules/.pnpm/@formatjs+swc-plugin-experimental@0.3.7/node_modules/@formatjs/swc-plugin-experimental/index.wasm` as js transform plugin at /Users/{USERNAME}/Developer/mypremise/node_modules/.pnpm/@formatjs+swc-plugin-experimental@0.3.7/node_modules/@formatjs/swc-plugin-experimental/index.wasm
    1: RuntimeError: unreachable
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
✓ 2 modules transformed.
x Build failed in 479ms
error during build:
Error: [vite:react-swc] failed to handle: failed to invoke plugin: failed to invoke plugin on 'Some("/Users/{USERNAME}/Developer/lens/src/main.tsx")'

Caused by:
    0: failed to invoke `/Users/{USERNAME}/Developer/mypremise/node_modules/.pnpm/@formatjs+swc-plugin-experimental@0.3.7/node_modules/@formatjs/swc-plugin-experimental/index.wasm` as js transform plugin at /Users/{USERNAME}/Developer/mypremise/node_modules/.pnpm/@formatjs+swc-plugin-experimental@0.3.7/node_modules/@formatjs/swc-plugin-experimental/index.wasm
    1: RuntimeError: unreachable
file: /Users/{USERNAME}/Developer/lens/src/main.tsx
   ELIFECYCLE  Command failed with exit code 1.

Desktop (please complete the following information):

  • OS: MacOS Sonomoa Version 14.4.1 (23E224) on an Apple M1 Pro
  • Browser: Google Chrome (124.0.6367.62)
  • Version: 0.3.7

Additional context

A workaround to this issue is to avoid using the SWC plugin entirely and use the Babel plugin, however, this is not ideal for my project as performance has become a major concern and would benefit from the performance of SWC