Compiling JS failed: Invalid expression Buffer size

[DanielKuhn]

Description

Starting with Version 3.4.0 I get the error Compiling JS failed: 232124:78:invalid expression Buffer size 17924054 starts with: 766172205f5f42554444c455f535441 (see screenshot). I stayed with version 3.3.0 for as long as I could (up to React Native 0.71) but now that I'm finally upgrading my app to React Native 0.73 I need to upgrade to at least 3.6.0 and desperately need a fix for this.

Steps to reproduce

1. Install "react-native-reanimated" >= 3.4.0
2. Run app on iOS

Snack or a link to a repository

n.a.

Reanimated version

3.8.0

React Native version

0.73.6

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

iPhone 15 Pro (iOS 17)

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?

[DanielKuhn]

The solution outlined in this comment is outdated and does not help.

[tomekzaw]

Hi @DanielKuhn, thanks for reporting this issue.

Could you please provide a repro so we can investigate this problem?

It would also be helpful if you could share your JS bundle so we can see what's wrong in line 232124 and column 78.

[DanielKuhn]

Hi @tomekzaw ,

please find JS bundle attached. I upgraded to the latest version (RNReanimated 3.8.1) so now the error occurs in line 231833:78

bundle.js.zip

[tomekzaw]

@DanielKuhn Thanks for providing more details. The faulty line is:

    }(_react.default.Component<AnimatedComponentProps<InitialComponentProps>>);

For some reason, there's still some TypeScript syntax in the JS bundle (which should be JavaScript code).

Can you please try re-generating your yarn.lock (i.e. removing it and installing the dependencies again, possibly with newer versions)?

If that doesn't help, can you try upgrading TypeScript in your project?

[tjzel]

This seems like outdated @babel/preset-typescript potentially. Try to upgrade it (regenerating yarn.lock should do the trick).

[DanielKuhn]

Hi @tomekzaw and @tjzel your help is very much appreciated. So far I've...

• rebuilt the bundle (rm yarn.lock && rm -rf node_modules && yarn cache clean && yarn install)
• updated @babel/preset-typescript to 7.24.1
• updated typescript to 5.4.2

...but nothing seems to work.

I've had this problem ever since trying to upgrade react-native-reanimated to version 3.4.0 (just like this guy) - and I've tried all major versions up until 3.8.1 by now, in various versions of React Native - somehow there's always some TypeScript syntax which ends up in my bundle.js. That's why I postponed the update every time when upgrading the rest of the packages. But now I need to upgrade React Native to 0.73, therefore this time I need to get at least react-native-reanimated 3.6 to work.

The hint by @tomekzaw was correct so now I just need to figure out which setting or dependency causes the TypeScript syntax ending up in bundle.js If anyone has an idea where or who the culprit may be - or what changed concerning TypeScript transpilation between Version 3.3.0 and 3.4.0 - please let me know.

Please find my config files attached:

• package.json
• yarn.lock
• tsconfig.json
• babel.config.js

config-files.zip

[tjzel]

@DanielKuhn I looked into your package.json and yarn.lock, created new RN App using 0.73.6, copied your package.json and yarn.lock there, removed all irrelevant dependencies and everything worked fine.

From what I see react-native-svg-transfomer adds a bunch of babel plugins, however I don't know if you are actually using them - could it possible be the culprit?

Unfortunately, since there seems to be no problems with brand new apps it seems that the issue is somewhere on your side. There are some additional steps I would suggest here:

• Create a brand new React Native App npx react-native init App --version 0.73.6, add Reanimated, use it and see if the problem persists - if it does, then there's something wrong with your machine configuration.
• Clear your yarn cache in case you have overrode some packages - yarn cache clean.
• You can actually use generated js files instead of source typescript files. All you need is the following change in your metro.config.js:

diff --git a/metro.config.js b/metro.config.js
index ad8f87b..feaf6fb 100644
--- a/metro.config.js
+++ b/metro.config.js
@@ -6,6 +6,10 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
  *
  * @type {import('metro-config').MetroConfig}
  */
-const config = {};
+const config = {
+  resolver: {
+    resolverMainFields: ['main', 'react-native'],
+  },
+};
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);

[DanielKuhn]

It works! Awesome, thanks a ton you guys for explaining the problem and providing a working solution. @tjzel : Could you elaborate a little bit about what the resolver instruction resolverMainFields: ['main', 'react-native'] does? I'd like to fully understand the matter to evaluate potential side-effects before merging this in production.

[DanielKuhn]

Ah, I found the documentation - so I guess resolverMainFields: ['main', 'react-native'] switches the lookup order from the default ['react-native', 'browser', 'main'] to instead search in main first. But then the question is: Why does react-native-reanimated specify "react-native": "src/index" instead of pointing react-native to "lib/module/index" like main does?

[tjzel]

It's the standard for React Native to take the code from the source for bundling, all libraries point react-native target to source code. I don't know why however, I admit I have never exactly looked into it.

[DanielKuhn]

Neither have I. I also think that it shouldn't be required for react-native dev's to know all the ins and outs of package development. It looks to me like this is a standard config convention when creating a package using react-native-builder-bob. Anyways, I opened a pull request proposing the change. Maybe someone with more insights will comment on the matter. For now I'm using a fork with the change in package.json

[edg-nti]

Any update on this? Changing resolverMainFields causes us issues with other dependencies (specifically this)

[DanielKuhn]

I for my part forked react-native-reanimated at version 3.8.1 and simply pointed "react-native" to "lib/module/index" in package.json in the fork. I found changing resolverMainFields globally in my app too risky because I don't know which side-effects this might have in other packages and the typescript compilation mentioned here is only a problem in react-native-reanimated.

[ldipasquale]

Hi @DanielKuhn! Thanks!! Pointing "react-native" to "lib/module/index" works for me but when I install a package in the project it overrides the changes.

I tried to fork the project and change there but I got 'Cannot find module 'react-native-reanimated/plugin' when I try to install both forked and local projects.

How did you fork and install the project? Do you use your local project or the remote one? Is there any chance to access to your forked repo? Thank you again!

[DanielKuhn]

I can only guess here:

Hi @DanielKuhn! Thanks!! Pointing "react-native" to "lib/module/index" works for me but when I install a package in the project it overrides the changes.

This sounds like you made the change inside your local node_modules directory, which cannot work since it gets overwritten anytime you install via yarn or npm.

I tried to fork the project and change there but I got 'Cannot find module 'react-native-reanimated/plugin' when I try to install both forked and local projects.

What do you mean with "install both forked and local projects"? For every package you specify a source in your package.json. To install a package from a fork you simply specify another source?

How did you fork and install the project? Do you use your local project or the remote one? Is there any chance to access to your forked repo? Thank you again!

I forked this repo to our company github account, created a branch from tag 3.8.1 and added a commit which changes the line in package.json, created a merge request for the branch (which didn't get merged) and specified the repo and commit in my react native projects package.json like so: "react-native-reanimated": "git+https://github.com/codevise/react-native-reanimated.git#7a3c0cb1e492be420cd6cf0d95779fc87505fa85", I guess you could install from the fork as well, but it's always a good idea to host repos you use in production in accounts you have control over.

[tjzel]

Closing the issue since its irreproducible and seems to be tied to the user's environment issues. I'm happy to reopen the issue once a reliable reproduction is available.