`MarkdownTextInput` crashes with `__workletHash` error

[seanoliver]

Hey team,

I'm trying to use MarkdownTextInput with the parseExpensiMark parser as recommended in the docs, but I'm encountering a runtime error:

Cannot read property '__workletHash' of undefined

I've followed the setup instructions, including patching html-entities to be worklet-safe.

Repro Code:

import React, { useState } from 'react';
import { MarkdownTextInput, parseExpensiMark } from '@expensify/react-native-live-markdown';

export default function Page() {
  const [text, setText] = useState('Hello, world!');

  return (
    <MarkdownTextInput
      parser={parseExpensiMark}
      value={text}
      onChangeText={setText}
    />
  );
}

Patched html-entities:

I patched the html-entities package by adding 'worklet'; directives to the decode and decodeEntity functions. My installed version didn't include a lib/index.js file as mentioned in the error message mentioned here, so I modified the dist/commonjs/index.js file instead. This approach seemed appropriate given the structure of the package in my pnpm setup, but I could be wrong.

Here's the diff:

diff --git a/dist/commonjs/index.js b/dist/commonjs/index.js
index f871ed4..bd7b9b5 100644
--- a/dist/commonjs/index.js
+++ b/dist/commonjs/index.js
@@ -108,6 +108,7 @@ function getDecodedEntity(entity, references, isAttribute, isStrict) {
 }
 /** Decodes a single entity */
 function decodeEntity(entity, _a) {
+    'worklet';
     var _b = _a === void 0 ? defaultDecodeEntityOptions : _a, _c = _b.level, level = _c === void 0 ? 'all' : _c;
     if (!entity) {
         return '';
@@ -116,6 +117,7 @@ function decodeEntity(entity, _a) {
 }
 /** Decodes all entities in the text */
 function decode(text, _a) {
+    'worklet';
     var _b = _a === void 0 ? defaultDecodeOptions : _a, _c = _b.level, level = _c === void 0 ? 'all' : _c, _d = _b.scope, scope = _d === void 0 ? level === 'xml' ? 'strict' : 'body' : _d;
     if (!text) {
         return '';

Babel Configuration (if useful):

// babel.config.js
module.exports = {
  presets: ['babel-preset-expo'],
  plugins: ['react-native-reanimated/plugin'],
};

Package Versions:

Here's a snippet from my package.json:

{
  "dependencies": {
    "@expensify/react-native-live-markdown": "^0.1.267",
    "expensify-common": "^2.0.129",
    "react-native-reanimated": "~3.17.4",
    "html-entities": "^2.6.0",
    "react-native": "0.77.0"
  }
}

Additional Context:

• I'm using Expo SDK 52 and RN 0.77.0
• I've cleared caches and rebuilt the project using expo start -c.

Despite these steps, the error persists. Is there something I'm missing, or is there an alternative approach to using parseExpensiMark with MarkdownTextInput?

Thanks once again for your help!

[tomekzaw]

@seanoliver You're supposed to add 'worklet'; directive at the top of node_modules/html-entities/lib/index.js file, just like written in the error message, not inside any functions.

There's an actual patch in this very repository that does so: https://github.com/Expensify/react-native-live-markdown/blob/main/patches/html-entities%2B2.5.3.patch

[seanoliver]

Hmm... my html-entities package is structured a little differently. There's no lib/ directory, so I picked index.js within the commonjs/ directory thinking that's probably what is being used.

I'd originally added the worklet directive to the top of the file, but it didn't resolve the "html-entities must be workletized" error. Actually adding worklet to those individual functions did resolve that error but introduced this new new __workletHash one.

Maybe I need an older version of html-entities that aligns with the lib/index.js file structure?

html-entities/
├── LICENSE
├── README.md
├── package.json
├── dist/
│   ├── commonjs/
│   │   ├── index.d.ts
│   │   ├── index.js
│   │   ├── index.js.flow
│   │   ├── index.js.map
│   │   ├── named-references.js
│   │   ├── named-references.js.map
│   │   ├── numeric-unicode-map.js
│   │   ├── numeric-unicode-map.js.map
│   │   ├── package.json
│   │   ├── surrogate-pairs.js
│   │   └── surrogate-pairs.js.map
│   └── esm/
│       ├── index.d.ts
│       ├── index.js
│       ├── index.js.map
│       ├── named-references.js
│       ├── named-references.js.map
│       ├── numeric-unicode-map.js
│       ├── numeric-unicode-map.js.map
│       ├── package.json
│       ├── surrogate-pairs.js
│       └── surrogate-pairs.js.map
└── src/
    ├── index.ts
    ├── named-references.ts
    ├── numeric-unicode-map.ts
    └── surrogate-pairs.ts

[tomekzaw]

In such case, please try adding 'worklet'; directive in node_modules/html-entities/src/index.ts.

[seanoliver]

Unfortunately still not working:

This is with all other worklet directives removed and only putting one in src/index.ts:

diff --git a/src/index.ts b/src/index.ts
index 197413e6086eeb6bf08bc763bcede991ac8ed066..1af88c661e88906f85c1261633365b515bb8494e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,5 @@
+'worklet';
+
 import {bodyRegExps, namedReferences} from './named-references.js';
 import {numericUnicodeMap} from './numeric-unicode-map.js';
 import {fromCodePoint, getCodePoint} from './surrogate-pairs.js';

[tomekzaw]

Have you tried using html-entities@2.5.3?

[seanoliver]

I think we're getting somewhere! html-entities@2.5.3 has the lib/ file structure and when I patch it to add the worklet directive I no longer get the "needs to be workletized" error.

Unfortunately now I have a new error related to setParserId:

Exception thrown while executing UI block: -[RCTView setParserId:]: unrecognized selector sent to instance 0x142741d60

__44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke
    RCTUIManager.mm:1170
__44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke.194
__RCTExecuteOnMainQueue_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0
0x0

EDIT: This is the component code I'm using:

import {
  MarkdownTextInput,
  parseExpensiMark,
} from '@expensify/react-native-live-markdown';
import React from 'react';
import { StyleSheet } from 'react-native';
import { colors } from '../../lib/theme';

export function MarkdownSandbox() {
  const [text, setText] = React.useState('Hello, *world*!')

  return (
    <MarkdownTextInput
      style={styles.container}
      value={text}
      onChangeText={setText}
      parser={parseExpensiMark}
    />
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.charcoal[100],
    padding: 20,
  },
})

[tomekzaw]

@seanoliver Thanks for the response. Can you confirm that you're using Expo Prebuild and the New Architecture is enabled?

[seanoliver]

@tomekzaw I am using Expo Prebuild, but the New Architecture is currently not enabled (newArchEnabled is set to false in Podfile.properties.json).

[tomekzaw]

@seanoliver Okay so this is the issue, react-native-live-markdown works only with the New Architecture enabled.

[seanoliver]

D'oh! (should have read the README more closely) 🤦‍♂ Thanks, @tomekzaw! It's working beautifully now! Really appreciate your assistance!

[tomekzaw]

No problem, I really appreciate your precise problem descriptions, glad I could help.

[G2Jose]

Is there any way to make this work without new architecture?

[tomekzaw]

@G2Jose I'm afraid not, but you can still use some older release which doesn't require new arch (0.1.245 or earlier).

[G2Jose]

Thanks @tomekzaw, really appreciate your work on this, and I'm hoping I can upgrade to New Arch soon!

Just a thought - I wonder if you might want to update the README so the "new architecture only" text shows in a more prominent banner. This might just be me, but I'm used to seeing support for new architecture mentioned on library readmes to usually mean that it supports both new and old arch, as opposed to new arch only. So I totally missed the part about this one only supporting the New Architecture.