Package manager issue

[ahmadbakhshi]

Why can't I use any package manager other than npm?
Even if I regenerate the package-lock.json, I get tons of errors. It only works with the existing lock file and npm

[mrzachnugent]

@ahmadbakhshi Which package manager are you using?

There should only be a package-lock.json if you are using npm otherwise it should be deleted. You might want to also delete the node_modules, then use the other package manager to install your dependencies and start the app.

[ahmadbakhshi]

I prefer to use pnpm.

OS: mac
Package manager: pnpm

These are my stpes

1. I download the repo
2. delete package-lock.json
3. add .npmrc with "node-linker=hoisted"
4. install dependencies
5. pnpm start -> run in expo go
6. I get this error:

Error: [Reanimated] Invalid value passed to arguments, maybe you forgot to use .value?

This error is located at:
in CSSInteropAnimationWrapper (created by CSSInterop.Pressable)
in CssInteropComponent (created by DrawerToggle)
in DrawerToggle (created by Header)
in RCTView (created by View)
in View
in Unknown (created by Header)
in RCTView (created by View)
in View (created by Header)
in RCTView (created by View)
in View
in Unknown (created by Header)
in Header (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen
in Unknown (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by BottomTabView)
in RNSScreenNavigationContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by BottomTabView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator
in Unknown (created by TabsLayout)
in TabsLayout
in Unknown (created by Route((tabs)))
in Suspense (created by Route((tabs)))
in Route (created by Route((tabs)))
in Route((tabs)) (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by Drawer)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by Drawer)
in RNSScreen
in Unknown (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by Drawer)
in RNSScreenNavigationContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by Drawer)
in RCTView (created by View)
in View (created by Drawer)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by Drawer)
in RCTView (created by View)
in View (created by AnimatedComponent(View))
in AnimatedComponent(View)
in Unknown (created by PanGestureHandler)
in PanGestureHandler (created by Drawer)
in Drawer (created by DrawerViewBase)
in DrawerViewBase (created by DrawerView)
in RCTView (created by View)
in View (created by GestureHandlerRootView)
in GestureHandlerRootView (created by DrawerView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by DrawerView)
in DrawerView (created by DrawerNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by DrawerNavigator)
in DrawerNavigator
in Unknown (created by DrawerLayout)
in DrawerLayout
in Unknown (created by Route((main)))
in Suspense (created by Route((main)))
in Route (created by Route((main)))
in Route((main)) (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen
in Unknown (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator
in Unknown (created by RootLayoutNav)
in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
in BottomSheetModalProviderWrapper (created by RootLayoutNav)
in ThemeProvider (created by RootLayoutNav)
in RCTView (created by View)
in View (created by GestureHandlerRootView)
in GestureHandlerRootView (created by RootLayoutNav)
in RootLayoutNav (created by RootLayout)
in RootLayout
in Try
in Unknown
in Unknown (created by Route())
in Suspense (created by Route())
in Route (created by Route())
in Route() (created by ContextNavigator)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by wrapper)
in wrapper (created by ContextNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by ContextNavigator)
in ContextNavigator (created by ExpoRoot)
in ExpoRoot (created by App)
in App (created by ErrorOverlay)
in ErrorToastContainer (created by ErrorOverlay)
in ErrorOverlay (created by withDevTools(ErrorOverlay))
in withDevTools(ErrorOverlay)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes
ERROR TypeError: Cannot assign to read-only property 'type'

If I use the existing package-lock.json and npm, it works.

[mrzachnugent]

@ahmadbakhshi With pnpm and expo, if I remember correctly you might have to add a .npmrc file with it's content as node-linker=hoisted.

Can you try that out and see if it works?

Reference: an expo repo that uses pnpm

[the-simian]

@ahmadbakhshi you may also need to follow the steps further down in the readme related to peer dependencies in the afforementioned byCedric monorepo as well:
https://github.com/byCedric/expo-monorepo-example?tab=readme-ov-file#pnpm-workarounds

I also want to point out there's an open issue in expo related to explaining pnpm compatibility. Of note this comment:

expo/expo#26751 (comment)

As you may have noticed, there are a lot of moving parts within React Native. Most of these moving parts are, unfortunately, incompatible with pnpm's isolated modules. There are two options: expo/expo#26606 (comment)

(this comment is by the same author as the aforementioned pnpm monorepo)

and

pnpm is not mentioned at all on the wiki, but it may be wise to point out that pnpm is not compatible.

In other words, this project probably isn't specifically responsible for pnpm not working. You'll likely need to implement workarounds and it is apparently currently not officially supported by expo yet due to pnpm's isolated modules approach

I will also add that the specific error you're seeing is being emitted by the dependency react-native-reanimated; useSharedValue is the signal-based animation-state-manager hook from that framework.

Of note, there's a few issues related to using react-native-reanimated in the mentioned monorepo here that is still open:

1. Hoisting react-native-reanimated causes the app to quite with duplicates error byCedric/expo-monorepo-example#81
2. [Idea]: Add second expo prebuild app + eas build --local & eas submit github pipelines byCedric/expo-monorepo-example#83

[ahmadbakhshi]

Reference in new

I already mentioned that I have added .npmrc, still not working.

[ahmadbakhshi]

@ahmadbakhshi you may also need to follow the steps further down in the readme related to peer dependencies in the afforementioned byCedric monorepo as well: https://github.com/byCedric/expo-monorepo-example?tab=readme-ov-file#pnpm-workarounds

I also want to point out there's an open issue in expo related to explaining pnpm compatibility. Of note this comment:

expo/expo#26751 (comment)

As you may have noticed, there are a lot of moving parts within React Native. Most of these moving parts are, unfortunately, incompatible with pnpm's isolated modules. There are two options: expo/expo#26606 (comment)

(this comment is by the same author as the aforementioned pnpm monorepo)

and

pnpm is not mentioned at all on the wiki, but it may be wise to point out that pnpm is not compatible.

In other words, this project probably isn't specifically responsible for pnpm not working. You'll likely need to implement workarounds and it is apparently currently not officially supported by expo yet due to pnpm's isolated modules approach

I will also add that the specific error you're seeing is being emitted by the dependency react-native-reanimated; useSharedValue is the signal-based animation-state-manager hook from that framework.

Of note, there's a few issues related to using react-native-reanimated in the mentioned monorepo here that is still open:

1. Hoisting react-native-reanimated causes the app to quite with duplicates error byCedric/expo-monorepo-example#81
2. [Idea]: Add second expo prebuild app + eas build --local & eas submit github pipelines byCedric/expo-monorepo-example#83

I have gone through the entire Readme and followed all steps, I still get the exact same error.
Event if I use npm as package manager and generate a new lock file, getting the exact same error agin.

It should be related to the lock file.

[the-simian]

@ahmadbakhshi , I did a package-lock regeneration 2 days ago here: #41 and smoke-tested every component with npm. I could verify that one works.

Do you see differences between the lock file you just created and the one in that PR? More importantly, can you reproduce the error using the lock file in that PR? If not, then the break could be in a ranged dependency change in the last 24 hours or so.

This might help: I am also running more up-to-date dependencies than this in another project (with npm) and things are working there as well, specifically these core versions. Note that I am not using ranged dependencies, I'm using these exact versions:

  "@expo/metro-runtime": "3.1.3",
  "@react-navigation/drawer": "6.6.7",
  "@react-navigation/material-top-tabs": "6.6.6",
  "@react-navigation/native": "6.1.10",
  "expo-dev-client": "3.3.8",
  "expo-linking": "6.2.2",
  "expo-router": "3.4.7",
  "expo": "50.0.6",
  "nativewind": "4.0.23",
  "react-dom": "18.2.0",
  "react-native-reanimated": "3.6.2",
  "react-native-safe-area-context": "4.8.2",
  "react-native": "0.73.4",
  "react": "18.2.0",
  "tailwindcss": "3.4.1"

[ahmadbakhshi]

@ahmadbakhshi , I did a package-lock regeneration 2 days ago here: #41 and smoke-tested every component with npm. I could verify that one works.

Do you see differences between the lock file you just created and the one in that PR? More importantly, can you reproduce the error using the lock file in that PR? If not, then the break could be in a ranged dependency change in the last 24 hours or so.

This might help: I am also running more up-to-date dependencies than this in another project (with npm) and things are working there as well, specifically these core versions. Note that I am not using ranged dependencies, I'm using these exact versions:

  "@expo/metro-runtime": "3.1.3",
  "@react-navigation/drawer": "6.6.7",
  "@react-navigation/material-top-tabs": "6.6.6",
  "@react-navigation/native": "6.1.10",
  "expo-dev-client": "3.3.8",
  "expo-linking": "6.2.2",
  "expo-router": "3.4.7",
  "expo": "50.0.6",
  "nativewind": "4.0.23",
  "react-dom": "18.2.0",
  "react-native-reanimated": "3.6.2",
  "react-native-safe-area-context": "4.8.2",
  "react-native": "0.73.4",
  "react": "18.2.0",
  "tailwindcss": "3.4.1"

I updated package.json with provided versions, deleted node_modules, package-lock.json and .expo folder.
Basically started from scratch and getting same error again.
I tried both Expo go and Dev Client.

[the-simian]

@mrzachnugent I looked into this. was able to verify that regenerating the package-lock.json file does indeed break even with npm.
Something probably changed from yesterday to today in one of the ranged dependencies that's causing the problem.

I'm looking into it right now

[the-simian]

@ahmadbakhshi
I was able to get the project to build again by locking nativewind at "nativewind": "4.0.13",

I am surprised because I just tested this yesterday at v4.0.23 on #41 which probably needs to have some other dep locked. If you regenerate the lockfile with the declared version range it will install 4.0.23 since its preceded with ^

I was also able to get this to run with .pnpm and it was necessary to add the .npmrc file with node-linker=hoisted, or you'll get a "red screen".

Can you try again after removing the ^ from nativewind and locking to 4.0.13 ?

[the-simian]

@mrzachnugent I've opened a PR that I believe will resolve this issue if anyone reinstalls and deletes the package-lock.json

[ahmadbakhshi]

@mrzachnugent I've opened a PR that I believe will resolve this issue if anyone reinstalls and deletes the package-lock.json

It worked for me.
Thank you

[the-simian]

I've also logged a separate issue in the downstream dependency : nativewind/nativewind#785

[the-simian]

Here's a related issue in nativewind related to versions higher than 4.0.13 and pnpm
nativewind/nativewind#701

[ahmadbakhshi]

I have also tested with pnpm and this configuration and I can confirm it's working