React-native-reanimated: Babel v7 and Pre-Transpile Release?

[NateAGeek]

Description

There are some projects that will ignore babel transpiling on node_modules. I was curious as to why this v2 project does not transpile releases?

Package versions

• React: 16.13.1
• React Native: 0.63.2
• React Native Reanimated: master branch

[jakub-gonet]

v1 was transpiling releases using Bob, we disabled it for v2 because it interfered with aar creation. We could reenable it for js files I think. I'll forward this issue to the team.

[joaomellogomes]

As NateAGeek said, in my v2 test project I got an error when compiling

Syntax Error
Unexpected token =

Because the plugin.js file on line 108 has class properties that have not been transpiled

[riordanpawley]

Is there a workaround for this?

Edit: I created a patch with patch-package if anyone else needs
https://gist.github.com/riordanpawley/aa09d6fc78b5c520ddf5ba1d6f160c35

[joaomellogomes]

Is there a workaround for this?

Edit: I created a patch with patch-package if anyone else needs
https://gist.github.com/riordanpawley/aa09d6fc78b5c520ddf5ba1d6f160c35

Yes, exists. I transpile the code of plugin file with babel, is a temporary solution.

[terrysahaidak]

As NateAGeek said, in my v2 test project I got an error when compiling

Syntax Error
Unexpected token =

Because the plugin.js file on line 108 has class properties that have not been transpiled

what version of node do you use?

[riordanpawley]

I get it on 10.16.3

[terrysahaidak]

The minimum required version of Node for React Native itself is 12.
Please, upgrade your Node version first.

[jakub-gonet]

This problem comes from the fact that Babel plugins aren't transpiled (nor they should be). We'll address this issue sometime soon by transpiling plugin source before releasing the package.

[terrysahaidak]

I don't think it should be transpired as long as it uses features available with the minimal required version of NodeJS for React Native.

[joaomellogomes]

As NateAGeek said, in my v2 test project I got an error when compiling

Syntax Error
Unexpected token =

Because the plugin.js file on line 108 has class properties that have not been transpiled

what version of node do you use?

this error occurs here using node v10.19.0, resolved by changing to v12.14.1

[riordanpawley]

The minimum required version of Node for React Native itself is 12.
Please, upgrade your Node version first.

Fair, no time to go through that rabbit hole right now but transpiling it myself is no biggie for such an edge case

[NateAGeek]

This makes sense. I think the only issue I have is some projects by default setup webpack to ignore node_modules, such as storybook for web. My only concern, and I have to really work against their webpack to get this to compile.

[terrysahaidak]

I completely agree that release should include both transpired code (the default entry point) and sources.

I just disagree that babel plugin should be transpired too because it fits the requirements of Node 12 which is required for React Native itself to work properly.

[du5rte]

Any update on this? I'm also not able to run it on storybook because of it

ERROR in node_modules/react-native-reanimated/src/core/AnimatedBezier.js 130:8
Module parse failed: Unexpected token (130:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export default class AnimatedBezier extends AnimatedNode {
>   _value;
|   _bezier;
| 

[satya164]

@terrysahaidak I just disagree that babel plugin should be transpired too because it fits the requirements of Node 12 which is required for React Native itself to work properly.

I don't know if the Babel plugin here does, but it's possible to use experimental syntax, typescript etc. in Node code as well, especially when the same repo contains React Native code which can use these syntaxes. IMO no harm in compiling the babel plugin. To avoid compiling things unncessarily, one could set the node option in babel config to 12.