@swc/plugin-formatjs support for rich-text elements in messages with german characters

[JSMD-maintainers]

Using version## Which package?

"@swc/plugin-formatjs": "^1.0.1",

Describe the bug

We migrated our application using from babel -> babel-plugin-formatjs plugin to swc -> @swc/plugin-formatjs and had FormattedMessage components like the following documentation described in place: https://formatjs.github.io/docs/react-intl/components#rich-text-formatting

Our example:

const BoldComponent = chunks => <b>{chunks}</b>;

<FormattedMessage
                defaultMessage="<b>ööööö</b>" // does crash
                values={{ b: BoldComponent }}
            />

However when using swc as the plugin I get the following error:

ERROR in ./src/client/components/App/App.tsx
  × Module build failed:
  ╰─▶   ×   ⚠
        │   │                     [React Intl] Message failed to parse.
        │   │                     See: https://formatjs.io/docs/core-concepts/icu-syntax
        │   │                     \n {:#?}
        │   │
        │   × SyntaxError: UNCLOSED_TAG
        │
      
 @ ./src/client/components/StrictModeWrapper.tsx
 @ ./src/client/dev.ts

We figured that it has something to do with the characters in the wrapped component, because something like this does work:

const BoldComponent = chunks => <b>{chunks}</b>;

<FormattedMessage
                defaultMessage="<b>oe oe oe oe</b>" // does work
                values={{ b: BoldComponent }}
            />

Expected behavior

This feature should be supported regardless of the characters in the wrapped rich-text

Reproducible env

I do have a reproducible repo setup, under:

https://github.com/MarcoLeko/rspack-can-not-read-property-of-undefined

Steps to reproduce:

1. Checkout repo
2. Execute npm ci
3. Execute npm run rspack:dev:server

=> Experience crash

If you change the translation and remove ööö in the translation the server will not crash

[JSMD-maintainers]

@kdy1 considering your comment your goal is to maintain this plugin. May I ask on how you define maintenance in general? As I do not see much of active support here. I'm very well aware that people have their own business to do and can not immediately jump on bug fixes. But It would be nice to have some sort of acknowledgement or some feedback if there is information missing to you tackling this bugfix.

Thank you in advance

[kdy1]

It's mainly about making it usable with recent versions of @swc/core or next.js

[kdy1]

Your reproduction is way too big to investigate. Ideally it should have only @swc/core and the Wasm plugin as dependencies.

[JSMD-maintainers]

I understand that the reproduction environment isn’t the smallest, but let me make this clear:

• The issue has already been narrowed down to an extremely simple use-case, as outlined in the bug report.
• If you need specifics about the @swc/core version, it’s 1.7.42. That said, this issue likely spans multiple versions of react-intl + @swc/core using this plugin. If you have any local development or testing setup for this plugin - be it a simple unit test environment - verifying this use-case should be straightforward.
• The focus should not be on the reproducible environment, especially given that a detailed, step-by-step guide was already provided to recreate the issue. The real focus should be on the bug itself.

Ultimately, this comes down to communication. The fact that you responded to my sharper comment within minutes suggests you were already aware of the bug. Instead of addressing it earlier, however, it seems the issue was ignored -despite the significant effort invested by an engineer to explain it and provide a reproducible environment. Honestly, this leaves a rather unpleasant aftertaste.

[kdy1]

Yeah, I admit that I forgot about the issue after reading it when the issue was filed. That‘s why I talked about the reproduction. I’m sorry about that.

But I have lots of things to do, and I need to handle things with higher priority first. This issue can’t be prioritized because this issue does not impact lots of users. I can review/accept PR and I always tries to ensure contributors don’t get blocked by me by reviewing all PRs asap, but I can’t work on all issues right away. I just don’t have resources to put into it. It’s not just me. All open source maintainers have similar problem. If you want, I can ask community about assigning some sort of bounties to the issues so there it can be taken by external contributors. But even you put bounties on this issue, I’ll prioritize issues impacting more users, issues which are more fundamental to usages, issues impacting stable APIs, or issues that are impacting production. That’s the thing OSS project maintainers should do.

[markmssd]

I'm also running into this issue, which is blocking us from upgrading SWC... I can provide a smaller reproducible if that's any helpful as well!

[tompuric]

I am also experiencing the same issue with special characters.

Passes: "You’ll lose access to <b>{feature}</b> features"
Fails:  "You'll lose access to <b>{feature}</b> features"

Where in my example, the quotation is the breaking character.

---

I was able to reproduce this within the existing test suite by utilising a special char.

Example 1 (<test-tag>ööö</test-tag>)

---- parser_tests_tests__fixtures__open_close_tag_2 stdout ----
Input: /Users/tpuric/src/rust/plugins/crates/swc_icu_messageformat_parser/tests/fixtures/open_close_tag_2
thread 'parser_tests_tests__fixtures__open_close_tag_2' panicked at crates/swc_icu_messageformat_parser/tests/run_parser_e2e.rs:170:5:
assertion failed: `(left == right)`'
  left: `"Object {\"err\": Object {\"kind\": Number(27), \"location\": Object {\"end\": Object {\"column\": Number(25), \"line\": Number(1), \"offset\": Number(24)}, \"start\": Object {\"column\": Number(1), \"line\": Number(1), \"..."` (truncated)
 right: `"Object {\"err\": Null, \"val\": Array [Object {\"children\": Array [Object {\"location\": Object {\"end\": Object {\"column\": Number(14), \"line\": Number(1), \"offset\": Number(13)}, \"start\": Object {\"column\": Numb..."` (truncated)

Differences (-left|+right):
 Object {
-    "err": Object {
-        "kind": Number(27),
-        "location": Object {
-            "end": Object {
-                "column": Number(25),
-                "line": Number(1),
-                "offset": Number(24),
-            },
-            "start": Object {
-                "column": Number(1),
-                "line": Number(1),
-                "offset": Number(0),
+    "err": Null,
+    "val": Array [
+        Object {
+            "children": Array [
+                Object {
+                    "location": Object {
+                        "end": Object {
+                            "column": Number(14),
+                            "line": Number(1),
+                            "offset": Number(13),
+                        },
+                        "start": Object {
+                            "column": Number(11),
+                            "line": Number(1),
+                            "offset": Number(10),
+                        },
+                    },
+                    "type": Number(0),
+                    "value": String("ööö"),
+                },
+            ],
+            "location": Object {
+                "end": Object {
+                    "column": Number(25),
+                    "line": Number(1),
+                    "offset": Number(24),
+                },
+                "start": Object {
+                    "column": Number(1),
+                    "line": Number(1),
+                    "offset": Number(0),
+                },
             },
+            "type": Number(8),
+            "value": String("test-tag"),
         },
-        "message": String("<test-tag>ööö</test-tag>"),
-    },
-    "val": Null,
+    ],
 }

Example 2. (<test-tag>€€€</test-tag>)

test parser_tests_tests__fixtures__open_close_tag_2 ... FAILED

failures:

---- parser_tests_tests__fixtures__open_close_tag_2 stdout ----
Input: /Users/tpuric/src/rust/plugins/crates/swc_icu_messageformat_parser/tests/fixtures/open_close_tag_2
thread 'parser_tests_tests__fixtures__open_close_tag_2' panicked at crates/swc_icu_messageformat_parser/src/parser.rs:1738:21:
byte index 14 is not a char boundary; it is inside '€' (bytes 13..16) of `<test-tag>€€€</test-tag>`
stack backtrace:
   0: rust_begin_unwind
             at /rustc/55a22d2a63334e0faff0202b72a31ce832b56125/library/std/src/panicking.rs:665:5
   1: core::panicking::panic_fmt
             at /rustc/55a22d2a63334e0faff0202b72a31ce832b56125/library/core/src/panicking.rs:74:14
   2: core::str::slice_error_fail_rt
   3: core::str::slice_error_fail
             at /rustc/55a22d2a63334e0faff0202b72a31ce832b56125/library/core/src/str/mod.rs:68:5
   4: core::str::traits::<impl core::slice::index::SliceIndex<str> for core::ops::range::RangeFrom<usize>>::index
             at /rustc/55a22d2a63334e0faff0202b72a31ce832b56125/library/core/src/str/traits.rs:537:21
   5: core::str::traits::<impl core::ops::index::Index<I> for str>::index
             at /rustc/55a22d2a63334e0faff0202b72a31ce832b56125/library/core/src/str/traits.rs:60:9
   6: swc_icu_messageformat_parser::parser::Parser::peek
             at ./src/parser.rs:1738:21
   7: swc_icu_messageformat_parser::parser::Parser::try_parse_left_angle_bracket
             at ./src/parser.rs:934:31
   8: swc_icu_messageformat_parser::parser::Parser::parse_literal
             at ./src/parser.rs:849:44
   9: swc_icu_messageformat_parser::parser::Parser::parse_message
             at ./src/parser.rs:733:22
  10: swc_icu_messageformat_parser::parser::Parser::parse_tag
             at ./src/parser.rs:776:28
  11: swc_icu_messageformat_parser::parser::Parser::parse_message
             at ./src/parser.rs:731:21
  12: swc_icu_messageformat_parser::parser::Parser::parse
             at ./src/parser.rs:690:9
  13: run_parser_e2e::parser_tests
             at ./tests/run_parser_e2e.rs:152:25
  14: run_parser_e2e::parser_tests_tests__fixtures__open_close_tag_2
             at ./tests/run_parser_e2e.rs:125:1
  15: run_parser_e2e::parser_tests_tests__fixtures__open_close_tag_2::{{closure}}
             at ./tests/run_parser_e2e.rs:125:46
  16: core::ops::function::FnOnce::call_once
             at /rustc/55a22d2a63334e0faff0202b72a31ce832b56125/library/core/src/ops/function.rs:250:5
  17: core::ops::function::FnOnce::call_once
             at /rustc/55a22d2a63334e0faff0202b72a31ce832b56125/library/core/src/ops/function.rs:250:5
note: Some details are omitted, run with `RUST_BACKTRACE=full` for a verbose backtrace.

I don't have the expertise to send over a patch

[MarcoLeko]

Im facing the same issue unfortunately - this forces me to stick to babel right now :(

[MarcoLeko]

Trying to summon a developer that worked on the former swc compatible plugin @formatjs/swc-plugin-experimental @runarheggset Do you think you could have a look on this issue? A lot of devs would be greatful for this :)