Compiling JS failed: Invalid expression Buffer size about react-native-reanimated

[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]

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.

[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?

[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

[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)