error: node_modules/react-native-reanimated/src/reanimated2/threads.ts: /Users/zhuxiuwu/space/native/nativeapp/node_modules/react-native-reanimated/src/reanimated2/threads.ts: [Reanimated] Babel plugin exception: SyntaxError: unknown: Unexpected token

[boonook]

Description

error: node_modules/react-native-reanimated/src/reanimated2/threads.ts: /Users/zhuxiuwu/space/native/nativeapp/node_modules/react-native-reanimated/src/reanimated2/threads.ts: [Reanimated] Babel plugin exception: SyntaxError: unknown: Unexpected token

Steps to reproduce

System:
OS: macOS 13.1
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 46.64 MB / 8.00 GB
Shell:
version: 3.2.57
path: /bin/bash
Binaries:
Node:
version: 16.14.0
path: ~/.nvm/versions/node/v16.14.0/bin/node
Yarn:
version: 1.22.17
path: /usr/local/bin/yarn
npm:
version: 8.3.1
path: ~/.nvm/versions/node/v16.14.0/bin/npm
Watchman:
version: 2022.10.31.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK:
API Levels:
- "21"
- "22"
- "23"
- "24"
- "25"
- "26"
- "27"
- "28"
- "29"
- "30"
- "31"
- "32"
- "33"
Build Tools:
- 23.0.1
- 23.0.2
- 23.0.3
- 25.0.0
- 25.0.1
- 25.0.2
- 25.0.3
- 26.0.0
- 26.0.1
- 26.0.3
- 27.0.3
- 28.0.2
- 28.0.3
- 29.0.0
- 29.0.2
- 30.0.2
- 30.0.3
- 31.0.0
- 33.0.0
- 33.0.0
System Images:
- android-26 | Google APIs Intel x86 Atom
- android-26 | Google Play Intel x86 Atom
- android-27 | Google APIs Intel x86 Atom
- android-27 | Google Play Intel x86 Atom
- android-28 | Google APIs Intel x86 Atom
- android-28 | Google Play Intel x86 Atom
- android-29 | Google APIs Intel x86 Atom
- android-29 | Google Play Intel x86 Atom
- android-30 | Intel x86 Atom_64
- android-30 | Google APIs Intel x86 Atom
- android-30 | Google APIs Intel x86 Atom_64
- android-30 | Google Play Intel x86 Atom
- android-30 | Google APIs ATD Intel x86 Atom
- android-31 | Intel x86 Atom_64
- android-31 | Google APIs Intel x86 Atom_64
- android-32 | Google APIs Intel x86 Atom_64
- android-33 | Google APIs Intel x86 Atom_64
Android NDK: 22.1.7171670
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode:
version: 14.3.1/14E300c
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.8
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: ^18.2.0
react-native:
installed: 0.72.3
wanted: 0.72.3
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

{
"name": "nativetypescriptapp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"bundle-ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.jsbundle --assets-dest ./ios/bundle"
},
"dependencies": {
"@babel/plugin-proposal-decorators": "^7.22.15",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
"@babel/plugin-proposal-optional-chaining": "^7.21.0",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.22.15",
"@babel/types": "^7.22.19",
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/cameraroll": "^4.1.2",
"@react-native-community/clipboard": "^1.5.1",
"@react-native-community/datetimepicker": "^5.1.0",
"@react-navigation/bottom-tabs": "^6.2.0",
"@react-navigation/drawer": "^6.3.0",
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.4.1",
"babel-plugin-import": "^1.13.8",
"babel-plugin-root-import": "^6.6.0",
"babel-preset-expo": "^9.5.2",
"events": "^3.3.0",
"fbjs": "^3.0.2",
"i18n-js": "^3.9.2",
"lodash": "^4.17.21",
"mobx": "^6.3.13",
"mobx-react": "^7.2.1",
"mobx-react-lite": "^3.3.0",
"moment": "^2.29.3",
"qs": "^6.10.3",
"react": "^18.2.0",
"react-native": "0.72.3",
"react-native-actionsheet": "^2.4.2",
"react-native-auto-height-image": "^3.2.4",
"react-native-device-info": "^10.9.0",
"react-native-gesture-handler": "^2.12.1",
"react-native-image-crop-picker": "^0.40.0",
"react-native-image-zoom-viewer": "^3.0.1",
"react-native-img-cache": "^1.6.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-lewin-qrcode": "^1.1.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-localize": "^2.2.1",
"react-native-permissions": "^3.9.1",
"react-native-qrcode-svg": "^6.1.2",
"react-native-reanimated": "^3.5.2",
"react-native-safe-area-context": "^4.7.2",
"react-native-screens": "^3.25.0",
"react-native-spinkit": "^1.5.1",
"react-native-splash-screen": "^3.3.0",
"react-native-svg": "^13.13.0",
"react-native-ui-lib": "^7.8.0",
"react-native-view-shot": "^3.7.0",
"react-native-vision-camera": "^2.16.1",
"react-native-webview": "^13.6.0",
"recast": "^0.23.1",
"rn-fetch-blob": "0.13.0-beta.2",
"vision-camera-code-scanner": "^0.2.0"
},
"devDependencies": {
"@babel/core": "7",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/eslint-config": "^0.72.2",
"@react-native/metro-config": "^0.72.9",
"@tsconfig/react-native": "^3.0.0",
"@types/jest": "^26.0.23",
"@types/react": "^18.0.24",
"@types/react-native": "^0.72.2",
"@types/react-test-renderer": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^6.7.2",
"@typescript-eslint/parser": "^6.7.2",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.76.7",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"resolutions": {
"@types/react": "^17"
},
"engines": {
"node": ">=16"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}

Snack or a link to a repository

https://gitee.com/boonook/nativeapp/tree/0.72/

Reanimated version

3.5.2

React Native version

0.72.3

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[Latropos]

Hi! Try this steps:

• Please make sure your config is valid, (see our docs HERE)
• Clean your cache
• Remove node_modules and run yarn install again
• Run pod install
  • Make sure you've installed all your pods, since error message from Pods is not red

[boonook]

Hi! Try this steps:

• Please make sure your config is valid, (see our docs HERE)

• Clean your cache

• Remove node_modules and run yarn install again

• Run pod install

  • Make sure you've installed all your pods, since error message from Pods is not red

The attempt was invalid

[tjzel]

Hi @boonook. I looked into your repo since the error was pretty weird. Turns out your yarn.lock is corrupted and you need to regenerate it. rm -rf node_modules yarn.lock in the root of your repo, then yarn should fix all the issues.

[Latropos]

Closing since I can confirm that @tjzel's solution is valid

[IgorNadj]

The solution does work, but "your yarn.lock is corrupted" doesn't really make sense.

The yarn.lock file itself works perfectly fine and is understood and maintained by yarn, so it isn't corrupted. There must be a package or a set of packages at the wrong version somewhere.

Also removing yarn.lock and regenerating it is not really recommended, because it involves retesting everything.

[jangsoori]

We're having the same issue, except with package-lock.json. Updating to @3.3.x is okay but as soon as you update to @>3.4.x it breaks. I don't think regenerating package-lock.json / yarn.lock is a good idea and my team probably wouldn't want to do that

[piaskowyk]

The yarn.lock file can become corrupted under certain circumstances. For instance, if you manually edit the .lock file during git conflict resolution or when you have a dependency conflict in node_modules - in such situation, there is no guarantee that the conflict will be resolved correctly.

[tjzel]

@jangsoori I believe a stricter control about used packages should by managed by your package.json. E.g. if you add a dependency in that form:
"some-dependency": "^1.0.0"
and then you rely on yarn.lock to prevent bumping up that version - why did you specify it like this in the first place.

@IgorNadj If you think it's absurd and yarn.lock cannot get corrupted, check out this issue:
#4828

In that issue, even though on npm (line 162 https://www.npmjs.com/package/react-native-reanimated/v/3.4.0?activeTab=code) everything is ok, the user had some TypeScript code in that file on his end, after upgrading, that caused errors.

[ianwensink]

Removing yarn.lock, node_modules, running yarn cache clean, and running pod install didn't resolve the issue for me either. Please advice on how to fix the issue.

Edit: this applies to both npm and yarn

[jangsoori]

Installing @babel/preset-typescript as a dev dependency fixes this for some reason

[ianwensink]

Installing @babel/preset-typescript as a dev dependency fixes this for some reason

@jangsoori Could you elaborate? What did you do exactly? If simply installing it fixed it, that sounds like a fluke due to the above mentioned dependencies issue. Or can you reproduce it by removing it? Did you add it to your babel config?

[jangsoori]

Installing @babel/preset-typescript as a dev dependency fixes this for some reason

@jangsoori Could you elaborate? What did you do exactly? If simply installing it fixed it, that sounds like a fluke due to the above mentioned dependencies issue. Or can you reproduce it by removing it? Did you add it to your babel config?

npm i -D @babel/preset-typescript
npm start -- --reset-cache
npm run ios

I just did those - funny thing is that I uninstalled it and it still seems to be working.

Edit:

This was my flow:

Update Reanimated: Error, not much diff in package-lock.json
Install @babel/preset-typescript - No error, much more diff (duh)
Uninstall @babel/preset-typescript - No error, somehow diff is the same as after installing @babel/preset-typescript

[Gabrielsv01]

Hi @boonook. I looked into your repo since the error was pretty weird. Turns out your yarn.lock is corrupted and you need to regenerate it. rm -rf node_modules yarn.lock in the root of your repo, then yarn should fix all the issues.

Thanks, it's a worked for me

[BasixKOR]

For those of you who'd like to learn more about this issue: This issue happens because the exact line shown in the error message uses newer syntax introduced in TypeScript 4.7 here. The feature in question is Instantiation Expressions.

The Babel installation prior to this feature may not be able to parse this syntax, and because Yarn will lock your versions of dependencies, the Babel will not be updated unless you specifically make it do so (which can be also triggered by removing yarn.lock). For this specific case, yarn upgrade @babeljs/preset-typescript should be sufficient.

[Kowaio]

Hello team,

When upgrading reanimated from @3.2.0 to latest @3.6.0 and removing yarn.lock before doing so, i've got this kind of error too, when building my app for iOS :

> react-native start --reset-cache


                        ▒▒▓▓▓▓▒▒
                     ▒▓▓▓▒▒░░▒▒▓▓▓▒
                  ▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒
                 ▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓
                 ▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓
                 ▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓
                 ▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓
                 ▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓
                 ▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓
                  ▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒
                     ▒▓▓▓▒░░░░▒▓▓▓▒
                        ▒▒▓▓▓▓▒▒


warning: the transform cache was reset.
                Welcome to Metro v0.76.7
              Fast - Scalable - Integrated


 BUNDLE  ./index.js 

error: node_modules/react-native-reanimated/src/reanimated2/threads.ts: 
/Users/kowaiombp/Desktop/Betacie/new-betaseries-native/node_modules/react-native-reanimated/src/reanimated2/threads.ts: 
[Reanimated] Babel plugin exception: Error: Unknown node type: "TSInstantiationExpression"

Here's my package.json:

"react-native-reanimated": "3.6.0",

"devDependencies": {
    "@babel/core": "7.23.3",
    "@babel/preset-env": "7.22.20",
    "@babel/preset-typescript": "7.23.3",
    "@babel/runtime": "7.22.15",

babel.config.js:

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: ['react-native-reanimated/plugin'],
  }
}

I set those versions to exact versions I had before removing yarn.lock, for the sake of the example, and to be sure i've got correct wanted version to maybe help you reproduce. If it's really coming from a new syntax in babel, removing yarn.lock and installing those versions should work right?

I also tried yarn upgrade @babeljs/preset-typescript but got the same result.
Do you have any idea since I deleted yarn.lock and recreated it too, without success?

Downgrading to 3.2.0 seems to work, but every other versions above 3.2.0 give me the same result.

Thanks!

[tjzel]

@Kowaio you probably need to bump your TypeScript to at least 4.7

also, what is your React Native version? Maybe using too old version of RN ships you with an old version of @babeljs/preset-typescript.

[Kowaio]

@tjzel My RN version was 0.72.3 and typescript was already at 4.8.4.
It didn't change anything to upgrade it at first, but I re-re-re-re cleaned up yarn.lock and it seems to be ok now for iOS build.

I maybe mistaken, but I think it successfully updated the syntax plugin this time, which was leading to the error.

So my advice for anyone seeing this, is to double/triple check that all babel plugins and so forth in yarn.lock are really updated and cleaned up.

Thanks for your help!

[YangJonghun]

This error occurred specifically from low version of @babel/types So, I suggest below instead of replace whole yarn.lock

1. add resolutions field with below dependencies in your package.json (version is meaningless, it just needs to be the latest)

  "resolutions": {
    "@babel/preset-typescript": "^7.23.3",
    "@babel/plugin-transform-typescript": "^7.23.6",
    "@babel/plugin-syntax-typescript": "^7.23.3",
    "@babel/types": "^7.23.6"
  },

2. install and sync above dependencies version (just run yarn install)
3. remove above code
4. install again (yarn install)

above is simply doing a deduplicate. so you can do it the other way around. The important thing is to keep the version of @babel/types up to date.

[delphinebugner]

I had a similar issue, and doing what you recommand @YangJonghun solved it so thank you! I'm gonna write it here for future reference:

• When doing an upgrade to React Native 0.73 + update to Reanimated 3.6.1 (which is necessary)
• Android build failed when doing the createBundleStagingDebugJsAndAssets step
• With error > Process 'command '/react-native/sdks/hermesc/osx-bin/hermesc'' finished with non-zero exit value 2
• With underlying error invalid expression }(_react.default.Component<AnimatedComponentProps<InitialComponentProps>>); at line 175XXX in android index.js

And yes having some Typescript annotation in the final bundle JS packed by Android could'nt work 😅
After commented any imports to Reanimated in the code, I was able to bundle &build, so it was definitely reanimated transpiling that failed!

And after doing the forced resolutions you suggested it worked, so really thank you because I struggled some time with it!

[jetaix]

yarn deduplicate fix the issue on my side:

npx yarn-deduplicate yarn.lock

[AntQwanlity]

For anyone still having issues :
I tried everything, custom resolutions, etc, and nothing worked.
I FINALLY managed to fix the issue by simply using Yarn instead of npm. I have no idea why though.
Maybe it helps.

[YangJonghun]

For anyone still having issues : I tried everything, custom resolutions, etc, and nothing worked. I FINALLY managed to fix the issue by simply using Yarn instead of npm. I have no idea why though. Maybe it helps.

@AntQwanlity
The lock files used by yarn and npm are different, so using npm instead of yarn is similar to deleting yarn.lock and reinstalling.
Using resolution is to sync the various versions installed in the dependency tree to the most recent compatible version. If you want to debug properly, you need to see what version of @babel/types is being installed in yarn.lock file.

[jp1987]

Using npm, none of the above steps worked for me until I did:

• remove node_modules
• remove package-lock.json
• run npm cache clean -f < this was the key for me
• run npm install

[AntQwanlity]

Using npm, none of the above steps worked for me until I did:

• remove node_modules
• remove package-lock.json
• run npm cache clean -f < this was the key for me
• run npm install

Thanks.

[Orange9000]

yarn deduplicate fix the issue on my side:

npx yarn-deduplicate yarn.lock

The only solution that actually works and doesn't involve deleting yarn.lock (which is a terrible idea). Thank you.

[chriskrogh]

if anyone's working in a monorepo and encountering this error, this worked for me: #4645 (comment)

[DavidStryfe]

I have tried everything listed above:

• Remove and install again node_modules
• npx yarn-deduplicate yarn.lock
• "resolutions": {
  "@babel/preset-typescript": "^7.23.3",
  "@babel/plugin-transform-typescript": "^7.23.6",
  "@babel/plugin-syntax-typescript": "^7.23.3",
  "@babel/types": "^7.23.6"
  }
• yarn upgrade @babel/preset-typescript
• Also tried to remove yarn.lock, but it didn't work.

I have all dependencies in their last version, I'm using Typescript 5.3.2, RN 0.73.4, but nothing works, and in the index.bundle I'm still seeing two errors:

(_react.default.Component<AnimatedComponentProps<InitialComponentProps>>); Error: Expression expected.
return runOnJS(runWorkletOnJS<Args, ReturnValue>).apply(void 0, [fun].concat(args)); Error: Expression expected.

[anindya2791]

yarn deduplicate fix the issue on my side:

npx yarn-deduplicate yarn.lock

This worked for me

[AZZB]

You can just delete the blocks @babel/preset-typescript, @babel/plugin-syntax-typescript, @babel/types from yarn.lock then run yarn install.

it will upgrade all these indirect dependencies to latest minor/patch versions.