[Reanimated] Babel plugin exception: TypeError: (0 , types_12.cloneNode) is not a function

[ChristopherGabba]

Description

I am trying to compile my expo-51 (managed workflow) app and I am getting the error

" node_modules/react-native-gesture-handler/src/handlers/gestures/hoverGesture.ts: /Users/christophergabba/Documents/ReelFeelApp/node_modules/react-native-gesture-handler/src/handlers/gestures/hoverGesture.ts: [Reanimated] Babel plugin exception: TypeError: (0 , types_12.cloneNode) is not a function"

Steps to reproduce

1. Use the react-native-ignite boilerplate
2. Choose NPM instead of yarn
3. Upgrade the project to Expo-51
4. Compile a Development Build for iOS

I solved the problem by installing all the dependencies with yarn. As soon as I use npm to install everything, it throws this error.

Snack or a link to a repository

Working on it now

Reanimated version

3.10.1

React Native version

0.74.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

iPhone 12

Acknowledgements

Yes

[github-actions[bot]]

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?

[AdityaAA2004]

I am also encountering the same issue when running the dev client on iOS. I have the same specs as mentioned above, and react native version 0.74.1. This is the full error message I receive:

error: node_modules/react-native-gesture-handler/src/handlers/gestures/GestureDetector.tsx: /Users/adityaarchunananand/Hatch/Frontend/node_modules/react-native-gesture-handler/src/handlers/gestures/GestureDetector.tsx: [Reanimated] Babel plugin exception: TypeError: (0 , types_12.cloneNode) is not a function

[ChristopherGabba]

@AdityaAA2004 It works when I run it yarn and have a yarn.lock file, but not when I use npm.

[AdityaAA2004]

Ok, so, does the App build on the expo dev client without this error when we use the yarn package manager?

[ChristopherGabba]

@AdityaAA2004 Yes it does for me. I cannot use NPM in my project until this issue is resolved.

[leon-xd]

any update on this? running into the same issue.

[leon-xd]

@AdityaAA2004

[AdityaAA2004]

I just try restarting the app, or delete it from the simulator and re-install all dependencies. Or, I re-create the development build again. I am not able to get a permanent fix.

[fruitybits]

using yarn solved a similar issue for me -> node_modules/react-native-gesture-handler/src/handlers/gestures/GestureDetector.tsx: (0 , types_1.cloneNode) is not a function

[almeidapaulooliveira]

Having the same problem building Android Expo

[sunboykenneth]

Any solution? Also encounter this issue.

[pridapablo]

Same here!

[shlomiro]

same here!

[tjzel]

Package management is difficult in React Native and npm tends to have the most issues with it in general. We highly encourage you to use yarn which the most of React Native community uses with great success.

Unfortunately, we don't have enough manpower to troubleshoot issues across different package managers. Could you explain to me why is using yarn not an option for you?

[ChristopherGabba]

@tjzel Well I am using yarn to solve this problem in the interim. The two big package managers at the moment are npm and yarn and I've never ran across a package where only one would work. Granted, it's not holding up my project, but do feel like this should be resolved. For someone who starts their whole app with npm and uses it for a while then adds this package and it doesn't work, it's a pain in the butt to troubleshoot and then ultimately cut ties with npm and swap to yarn.

[tjzel]

The fact is it that doesn't happen to all the npm users. Most of the issues of this kind I had been troubleshooting were caused by npm incorrectly pulling packages from a global cache.

@ChristopherGabba if the issue is still happening to you, could you see if on npm cache clean works for you when you're not using yarn?

I guess it wouldn't be bad to at least suggest some steps in the exception thrown in the Reanimated Babel plugin.

[ChristopherGabba]

@tjzel Sure thing, I'll try to here shortly.

[mohanataraj]

The fact is it that doesn't happen to all the npm users. Most of the issues of this kind I had been troubleshooting were caused by npm incorrectly pulling packages from a global cache.

@ChristopherGabba if the issue is still happening to you, could you see if on npm cache clean works for you when you're not using yarn?

I guess it wouldn't be bad to at least suggest some steps in the exception thrown in the Reanimated Babel plugin.

happened to me... same issue

[ThomasHoussin]

I had the same problem. npm cache clean didn't help (I tried npm cache verify before and did npm cache clean --force).

Switching to yarn solved the issue.