Cannot use worklets with latest expo (using tabs template)

[marksyzm]

Description

With 0.10.0 of react-native-audio-api, it will not currently instantiate a worklet node as it is not recognising 0.61 of react-native-worklets. 0.6.0 doesn't work either - it never seems to accept the worklets installation.

Expo (using latest 54.0.22 at this time) by default will only let me install 0.5.2 of react-native-worklets, and when I try and build on android, the worklets version validation fails.

Is there a patch for this or some other workaround? Shall I just remove the check in the C code?

Steps to reproduce

Run microphone recording environment:

const bufferSize = 1024
const sampleRate = 48000

const worklet = (audioData: Float32Array[], inputChannelCount: number) => {
  "worklet"
  console.log(audioData[1].length)
}

const recorder = new AudioRecorder({
  sampleRate,
  bufferLengthInSamples: bufferSize,
})
const audioContext = new AudioContext({ sampleRate })

const workletNode = audioContext.createWorkletNode(
  worklet,
  bufferSize,
  channelsPerFrame,
  "UIRuntime"
)
const adapterNode = audioContext.createRecorderAdapter()

adapterNode.connect(workletNode)
workletNode.connect(audioContext.destination)
recorder.connect(adapterNode)

recorder.start()

Snack or a link to a repository

https://snack.expo.dev/@marksyzm/suspicious-orange-truffles

React Native Audio API version

0.10.0

React Native version

0.81.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

Pixel 3A XL

Acknowledgements

Yes

[poneciak57]

Hi! We tested the library and it should build correctly with the newest version of Expo. To help you further, we’ll need a bit more information:

1. Could you share your package.json file?
2. Just to confirm — your application is not building, correct? If so, please provide the build logs or the exact error message that appears.
3. (Optional) Does the project build successfully on iOS?

Thanks! Let us know, and we’ll take a closer look.

[marksyzm]

It could be that I'm running skia, so I'll try a clean build now with the latest and put up a git repo if it fails so you get the package.json, etc.

Do I need to add react-native-worklets to the expo.install.ignore array to install it?

Bear with me; just doing all this now and adding a toggle button

(Yes, it built on iOS and had the same issue)

[poneciak57]

When i tried i just created plain expo project, added all packages to package.json and it worked so i guess you shouldn't add it to expo.install.ignore.

[marksyzm]

I just tried without "ignore" but I'm using the "tabs" example.
https://github.com/marksyzm/scratch-audio

npx create-expo-app@latest -t tabs 
npx expo prebuild
npx run ios
npx expo install react-native-worklets@0.6.1
npx expo install react-native-audio-api
npm run android

This happened during build

Error: Cannot find module 'semver/functions/prerelease'
Require stack:
- /Users/username/appname/node_modules/react-native-audio-api/scripts/[validate-worklets-version.js](http://validate-worklets-version.js/)
    at Function._resolveFilename (node:internal/modules/cjs/loader:1241:15)
    at Function._load (node:internal/modules/cjs/loader:1066:27)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1327:12)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (/Users/username/appname/node_modules/react-native-audio-api/scripts/[validate-worklets-version.js:2](http://validate-worklets-version.js:2/):26)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at [Object..js](http://object..js/) (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/username/appname/node_modules/react-native-audio-api/scripts/[validate-worklets-version.js](http://validate-worklets-version.js/)'
  ]
}

And no nodes running here:

 ERROR  [TypeError: Cannot read property 'numberOfInputs' of undefined] 

Code: index.tsx
  40 |       audioContextRef.current = audioContext
  41 |
> 42 |       const workletNode = audioContext.createWorkletNode(
     |                                                         ^
  43 |         worklet,
  44 |         bufferSize,
  45 |         1,

I'll make another branch on this repo trying out blank-typescript as the template.

[poneciak57]

ah i see. Add @types/semver as dev dependency and it should work. Will fix it 😄

[marksyzm]

Just tried, still no joy with semver (same error). Maybe this template already has an old version installed? I'll try bumping it.

Error: Cannot find module 'semver/functions/prerelease'
Require stack:
- /Users/username/appname/node_modules/react-native-audio-api/scripts/validate-worklets-version.js
    at Function._resolveFilename (node:internal/modules/cjs/loader:1241:15)
    at Function._load (node:internal/modules/cjs/loader:1066:27)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1327:12)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (/username/appname/node_modules/react-native-audio-api/scripts/validate-worklets-version.js:2:26)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/username/appname/node_modules/react-native-audio-api/scripts/validate-worklets-version.js'
  ]
}

Node.js v23.4.0

[marksyzm]

Yeah, I had to install the latest version of semver@7.7.3 to get the function to run, then delete all the build, then run

npm install semver@latest
rm -rf android/ .expo/

The semver error went away, but I'm still not getting worklets:

 ERROR  [TypeError: Cannot read property 'numberOfInputs' of undefined] 

[poneciak57]

I took your repo and it works. Try clearing cache do prebuild wtih --clean and should be fine. And remember that we index from 0 not from 1 😉

      const worklet = (
        audioData: Float32Array[],
        inputChannelCount: number
      ) => {
        "worklet"
        console.log(audioData[1].length) // here
      }

[marksyzm]

Urgh, AI dropped that in 🙄 I've been doing this stuff 18 years, which only explains why I missed that error 😅 I'll try --clean - I assume there's some hiddne cache? I was deleting .expo and installing all fresh

[poneciak57]

Your issue occurs because the C++ code is compiled without the worklets, causing the validation script to fail. Then TypeScript/JavaScript detects the worklets and that creates a mismatch.

If you have a custom monorepo setup, make sure that react-native-audio-api can correctly resolve react-native-worklets.
You can verify this by running:

react-native-audio-api/scripts/validate-worklets-version.js

or just

node -e "console.log(require.resolve('react-native-worklets/package.json'))"

in react-native-audio-api dir

[marksyzm]

Ahhhh yeah it works now! Thanks so much for your time :)

[poneciak57]

happy to hear that 😄

[marksyzm]

Just to add, you and your colleagues' work on this is remarkable and I really appreciate that you've all done this. It was a necessary addition to RN :)