Problems while running react-native-reanimated on Web

[khushal87]

I am getting the following errors while trying to run the package on web:

ERROR in ./node_modules/react-native-reanimated/lib/createAnimatedComponent.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/react-native-reanimated/lib/createAnimatedComponent.js: Support for the experimental syntax 'jsx' isn't currently enabled (508:21):

  506 |                 default: { collapsable: false },
  507 |             });
> 508 |             return (<Component {...props} ref={this._setComponentRef} {...platformProps}/>);
      |                     ^
  509 |         }
  510 |     }
  511 |     AnimatedComponent.displayName = `AnimatedComponent(${Component.displayName || Component.name || 'Component'})`;

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
    at Parser._raise (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:476:17)
    at Parser.raiseWithData (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:469:17)
    at Parser.expectOnePlugin (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:3820:18)
    at Parser.parseExprAtom (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:12577:18)
    at Parser.parseExprSubscripts (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:12149:23)
    at Parser.parseUpdate (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:12129:21)
    at Parser.parseMaybeUnary (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:12104:23)
    at Parser.parseMaybeUnaryOrPrivate (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:11901:61)
    at Parser.parseExprOps (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:11908:23)
    at Parser.parseMaybeConditional (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:11878:23)


ERROR in ./node_modules/react-native-reanimated/lib/reanimated1/Transitioning.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/react-native-reanimated/lib/reanimated1/Transitioning.js: Support for the experimental syntax 'jsx' isn't currently enabled (36:7):

  34 |   return (props) => {
  35 |     return (
> 36 |       <TransitioningContext.Consumer>
     |       ^
  37 |         {(context) => <Comp context={context} {...props} />}
  38 |       </TransitioningContext.Consumer>
  39 |     );

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
    at Parser._raise (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:476:17)
    at Parser.raiseWithData (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:469:17)
    at Parser.expectOnePlugin (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:3820:18)
    at Parser.parseExprAtom (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:12577:18)
    at Parser.parseExprSubscripts (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:12149:23)
    at Parser.parseUpdate (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:12129:21)
    at Parser.parseMaybeUnary (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:12104:23)
    at Parser.parseMaybeUnaryOrPrivate (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:11901:61)
    at Parser.parseExprOps (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:11908:23)
    at Parser.parseMaybeConditional (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:11878:23)


ERROR in ./node_modules/react-native-reanimated/lib/reanimated2/component/FlatList.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/react-native-reanimated/lib/reanimated2/component/FlatList.js: Support for the experimental syntax 'jsx' isn't currently enabled (19:17):

  17 | const createCellRenderer = (itemLayoutAnimation) => {
  18 |     const cellRenderer = (props) => {
> 19 |         return (<WrappedComponents.View layout={itemLayoutAnimation} onLayout={props.onLayout}>
     |                 ^
  20 |         {props.children}
  21 |       </WrappedComponents.View>);
  22 |     };

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
    at Parser._raise (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:476:17)
    at Parser.raiseWithData (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:469:17)
    at Parser.expectOnePlugin (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:3820:18)
    at Parser.parseExprAtom (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:12577:18)
    at Parser.parseExprSubscripts (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:12149:23)
    at Parser.parseUpdate (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:12129:21)
    at Parser.parseMaybeUnary (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:12104:23)
    at Parser.parseMaybeUnaryOrPrivate (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:11901:61)
    at Parser.parseExprOps (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:11908:23)
    at Parser.parseMaybeConditional (/Users/khushalagarwal/Projects/ReactNativeWebApp/node_modules/@babel/parser/lib/index.js:11878:23)

I have already added plugins: ['react-native-reanimated/plugin'] to babel.config.js.

React Native Reanimated Version: 2.4.1
React Native Gesture Handler version: 2.3.1
React Native version: 0.67.2

[khushal87]

@jakub-gonet

[ankit-gl]

@khushal87 were you able to solve this

[apostolouds]

Check this: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support

[joaojramia]

@apostolouds answer solved it for me.

Just in case this saves anyone's time - My problem was running Storybook with react-native-reanimated, and the only extra thing I had to do (other than following the docs) was to explicitly set the __DEV__ property in the plugins in the webpack config.

So instead of
new webpack.DefinePlugin({ process: { env: {} } })

I had to include
new webpack.DefinePlugin({__DEV__: 'true'})

Since Storybook will always be on dev mode on my project, I forced it to be 'true'. Otherwise just use your current env to check it.

For the rest, I followed exactly the docs mentioned by @apostolouds.