Cannot read property 'makeMutable' of undefined

[thecodecafe]

Description

When I call useSharedValue(0) the app crashes with the following message.

Cannot read property 'makeMutable' of undefined

Steps to reproduce

1. Run your app in development
2. Create a shared value with useSharedValue(0)

Snack or a link to a repository

Private Repo

Reanimated version

3.6.1

React Native version

0.73.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

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?

[tjzel]

Hi @thecodecafe, I'm afraid we cannot help you without any reproduction. We use useSharedValue everywhere in our examples and never had this kind of error.

[Hamidrezana]

I have same problem

[Latropos]

Since there are more users facing the same problem I was trying to reproduce it independently and also failed. Looks that we really need a reproducible example.

[thecodecafe]

@Latropos thanks, I'll try and set up a fresh react native project with the same setup and put it on a public repo by Sunday, I'm currently travelling.

[Latropos]

@thecodecafe Hi! Were you able to reproduce this issue?

[thecodecafe]

Hi @Latropos sorry for the delayed response, a colleague of mine was able to find the problem, there's was a slight mistake when I was adding the plugin in the babel file due to nesting from another plugin, it was resolved by properly adding the plugin in the babel file.
I'll go ahead and close this because that was the solution to the problem.
Thanks for following up.

[ShepSims]

For others looking to resolve - this is what your babel.config.js should look like if using useSharedValue / reanimated

module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: [
/// This Plugin should be last
'react-native-reanimated/plugin',
],
};

[pacehutt]

Hi @Latropos sorry for the delayed response, a colleague of mine was able to find the problem, there's was a slight mistake when I was adding the plugin in the babel file due to nesting from another plugin, it was resolved by properly adding the plugin in the babel file. I'll go ahead and close this because that was the solution to the problem. Thanks for following up.

Could you share how it got fixed?

[GoygovRustam]

I'm having the same issue.

[SonBeoDeveloper]

I'm having the same issue.

[nhyu]

I solved this problem.（我解决了这个问题）

react-native-reanimated-carousel 版本：3.5.1

这个问题是因为两个依赖库版本的问题，我从 react-native-reanimated-carousel 的 package.json 中发现依赖库版本并不是最新版本，所以用下面命令重新安装了这两个库。
yarn add react-native-reanimated@~3.3.0 react-native-gesture-handler@~2.12.0

安装完又按照下面文档进行了配置
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/

然后重启app错误就没有了。

---

Translate into English with translation software.

This problem is due to the problem of two dependent library versions. I found that the dependent library version is not the latest version from the react-native-reanimated-carousel package.json, so I reinstalled the two libraries with the following command.
yarn add react-native-reanimated @~3.3.0 react-native-gesture-handler @~2.12.0

After installation, it was configured according to the following documents
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/

Then restart the app and the error is gone.

[CarlosAlbertoTI]

I'm having the same issue.

[tjzel]

Since we haven't received any reproduction for this issue, I will close this issue. Feel free to ping me if you have a reproduction, preferably as a github repository. Only then will I reopen this issue.

[AdnanBadshah007]

i've faced the same issue i put plugin at last
ex :-
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: ['nativewind/babel',
[
'module-resolver',
{
root: ['.'],
extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
alias: {
'@screens': './screens',
'@public': './public',
},
},
],
'react-native-reanimated/plugin',
],
};

and then after i run a comman npm start -- --reset-cache and its works

[Zontex]

Since we haven't received any reproduction for this issue, I will close this issue. Feel free to ping me if you have a reproduction, preferably as a github repository. Only then will I reopen this issue.

module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: [
/// This Plugin should be last
'react-native-reanimated/plugin',
],
};

this solved the problem for me as well, adding 'react-native-reanimated/plugin', to babel file. on the previous RN version it wasn't required.