Closed boonook closed 1 year ago
github-actions[bot]
commented
1 year ago 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
commented
1 year ago Hi! Try this steps:
node_modules and run yarn install againpod install
boonook
commented
1 year ago Hi! Try this steps:
- Please make sure your config is valid, (see our docs HERE)
- Clean your cache
- Remove
node_modulesand runyarn installagainRun
pod install
- Make sure you've installed all your pods, since error message from Pods is not red
The attempt was invalid
tjzel
commented
1 year ago 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
commented
1 year ago Closing since I can confirm that @tjzel's solution is valid
IgorNadj
commented
1 year ago 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
commented
1 year ago 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
commented
1 year ago 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
commented
1 year ago @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:
https://github.com/software-mansion/react-native-reanimated/issues/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
commented
1 year ago 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
commented
1 year ago Installing @babel/preset-typescript as a dev dependency fixes this for some reason
ianwensink
commented
1 year ago Installing
@babel/preset-typescriptas 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
commented
1 year ago Installing
@babel/preset-typescriptas 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
commented
1 year ago Hi @boonook. I looked into your repo since the error was pretty weird. Turns out your
yarn.lockis corrupted and you need to regenerate it.rm -rf node_modules yarn.lockin the root of your repo, thenyarnshould fix all the issues.
Thanks, it's a worked for me
BasixKOR
commented
1 year ago 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
commented
11 months ago 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
commented
11 months ago @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
commented
11 months ago @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
commented
11 months ago 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
commented
11 months ago 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:
createBundleStagingDebugJsAndAssets step> Process 'command '/react-native/sdks/hermesc/osx-bin/hermesc'' finished with non-zero exit value 2invalid 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
commented
11 months ago yarn deduplicate fix the issue on my side:
npx yarn-deduplicate yarn.lock
AntQwanlity
commented
9 months ago 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
commented
9 months ago 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
commented
9 months ago Using npm, none of the above steps worked for me until I did:
node_modulespackage-lock.jsonnpm cache clean -f < this was the key for menpm installAntQwanlity
commented
9 months ago 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
commented
9 months ago 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
commented
9 months ago if anyone's working in a monorepo and encountering this error, this worked for me: https://github.com/software-mansion/react-native-reanimated/issues/4645#issuecomment-1913586143
DavidStryfe
commented
9 months ago I have tried everything listed above:
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
commented
7 months ago yarn deduplicate fix the issue on my side:
npx yarn-deduplicate yarn.lock
This worked for me
AZZB
commented
2 weeks ago 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.
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:
{ "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