gatsby-plugin-react-native-web react-native-reanimated

Is this plugin compatible with react-native-reanimated? I don't know what's happening under the hoods, but declaring a simple new Animated.Value(0) throw a lot of errors:

Browser

./node_modules/react-native-reanimated/src/core/AnimatedBezier.js 129:8
Module parse failed: Unexpected token (129: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;

Terminal

 ~/Pr/gatsby-site  master !4 ?2  gatsby develop                ✔  16:50:14
❯ gatsby develop
success open and validate gatsby-configs - 0.071s
success load plugins - 0.741s
success onPreInit - 0.003s
success initialize cache - 0.012s
success copy gatsby files - 0.261s
success onPreBootstrap - 0.016s
success createSchemaCustomization - 0.004s
success source and transform nodes - 0.088s
warn Plugin `gatsby-source-filesystem` tried to define the GraphQL type `File`,
success building schema - 0.357s
success createPages - 0.005s
success createPagesStatefully - 0.107s
success onPreExtractQueries - 0.003s
success update schema - 0.036s
success extract queries from components - 0.274s
success write out requires - 0.040s
success write out redirect data - 0.003s
success Build manifest and related icons - 0.133s
success onPostBootstrap - 0.194s
⠀
info bootstrap finished - 6.622 s
⠀
success run queries - 0.045s - 14/14 309.76/s

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (129:8)

File: node_modules/react-native-reanimated/src/core/AnimatedBezier.js:129:8


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (12:10)

File: node_modules/react-native-reanimated/src/animations/TimingAnimation.js:12:10


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (13:11)

File: node_modules/react-native-reanimated/src/core/AnimatedCall.js:13:11


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (27:40)

File: node_modules/react-native-reanimated/src/createAnimatedComponent.js:27:40


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (36:6)

File: node_modules/react-native-reanimated/src/Transitioning.js:36:6


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (5:7)

File: node_modules/react-native-reanimated/src/core/AnimatedAlways.js:5:7


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (60:8)

File: node_modules/react-native-reanimated/src/core/AnimatedOperator.js:60:8


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:12)

File: node_modules/react-native-reanimated/src/core/AnimatedClockTest.js:6:12


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:12)

File: node_modules/react-native-reanimated/src/core/AnimatedCond.js:6:12


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:12)

File: node_modules/react-native-reanimated/src/core/AnimatedStartClock.js:6:12


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:12)

File: node_modules/react-native-reanimated/src/core/AnimatedStopClock.js:6:12


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:16)

File: node_modules/react-native-reanimated/src/core/AnimatedClock.js:6:16


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:21)

File: node_modules/react-native-reanimated/src/core/AnimatedCode.js:6:21


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (6:8)

File: node_modules/react-native-reanimated/src/core/AnimatedBlock.js:6:8


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (7:10)

File: node_modules/react-native-reanimated/src/core/AnimatedDebug.js:7:10


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (7:7)

File: node_modules/react-native-reanimated/src/core/AnimatedFunction.js:7:7


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (86:15)

File: node_modules/react-native-reanimated/src/core/AnimatedNode.js:86:15


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (8:7)

File: node_modules/react-native-reanimated/src/core/AnimatedSet.js:8:7


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (98:13)

File: node_modules/react-native-reanimated/src/core/AnimatedEvent.js:98:13

failed Building development bundle - 4.594s

@EvanBacon I saw that you've got reanimated web examples running, is there anything we must do before make it works?

I can take a look on it with some initial help.

PS: using 2.0.0-beta.0version

Thanks guys!

Jan 04 '20 19:01 felippepuhle

Apparently it's working on 3.0.0-beta.0, but I had to use "react-native-web": "^0.11.1" to avoid this another error:

Can't resolve 'react-native-web/dist/exports/ToolbarAndroid' in '/Users/felippepuhle/Projects/gatsby-site/node_modules/react-native-gesture-handler'

Also, I had to install expo cause I was getting Error: Cannot determine which native SDK version your project uses because the module expo is not installed too.

Should I close this?

Jan 04 '20 20:01 felippepuhle

Hi.

I'm on holiday this week but maybe we can get in touch later so that I can help you.

The 3. 0 is quite early and we are still figuring things out to make it work nicely

Le sam. 4 janv. 2020 à 21:06, Felippe Rodrigo Puhle < [email protected]> a écrit :

Apparently it's working on 3.0.0-beta.0, but I had to use "react-native-web": "^0.11.1" to avoid this another error:

Can't resolve 'react-native-web/dist/exports/ToolbarAndroid' in '/Users/felippepuhle/Projects/gatsby-site/node_modules/react-native-gesture-handler'

Also, I had to install expo cause I was getting Error: Cannot determine which native SDK version your project uses because the module expo is not installed too.

Should I close this?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/slorber/gatsby-plugin-react-native-web/issues/24?email_source=notifications&email_token=AAFW6PXZPY4SLAAU7BMMW53Q4DT5BA5CNFSM4KCXS7AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIC7HRI#issuecomment-570815429, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFW6PWPDOP46UE5JHZ4E3DQ4DT5BANCNFSM4KCXS7AA .

Jan 05 '20 20:01 slorber

Awesome, just let me know when you get some free time. For now 3.0 beta-0 is working, but I’m available if you guys need any help on bug fixes and improvements.

Thanks.

Jan 06 '20 01:01 felippepuhle

In fact I was wrong, just tried to create a build and got a lot of errors again, both on react-native-gesture-handler and react-native-reanimated.

Almost 100% of the errors are:

Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled - Add @babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation.
Support for the experimental syntax 'classProperties' isn't currently enabled - Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

Also got some errors on some components, as:

/Users/felippepuhle/Projects/gatsby-site/node_modules/react-native-gesture-handler/touchables/TouchableWithoutFeedback.js: Unexpected token (5:2)

  3 |
  4 | const TouchableWithoutFeedback = React.forwardRef((props, ref) => (
> 5 |   <GenericTouchable ref={ref} {...props} />
    |   ^
  6 | ));

and

/Users/felippepuhle/Projects/gatsby-site/node_modules/react-native-reanimated/src/Transitioning.js: Unexpected token (36:6)

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

It's working like a charm on dev env.

Thanks!

Jan 07 '20 02:01 felippepuhle

I was able to solve this by adding the following code to gatsby-node.js, don't know if it's the right way:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /react-native-reanimated|react-native-gesture-handler/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["babel-preset-expo"],
            },
          },
        },
      ],
    },
  })

  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /hammerjs/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

This hammerjs stuff is needed cause it's using window for something, and SSR wasn't working

Jan 08 '20 16:01 felippepuhle

Hi

Yeah I know about this, Evan Bacon made a fix recently for hammers but didn't update the lib yet.

I'll fix this when I come back next week

Le mer. 8 janv. 2020 à 17:42, Felippe Rodrigo Puhle < [email protected]> a écrit :

I was able to solve this by adding the following code to gatsby-node.js, don't know if it's the right way:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { actions.setWebpackConfig({ module: { rules: [ { test: /react-native-reanimated|react-native-gesture-handler/, use: { loader: "babel-loader", options: { presets: ["babel-preset-expo"], }, }, }, ], }, })

if (stage === "build-html") { actions.setWebpackConfig({ module: { rules: [ { test: /hammerjs/, use: loaders.null(), }, ], }, }) } }

This hammerjs stuff is needed cause it's using window for something, and SSR wasn't working

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/slorber/gatsby-plugin-react-native-web/issues/24?email_source=notifications&email_token=AAFW6PS67IPLHZM5GKYMXU3Q4X65VA5CNFSM4KCXS7AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEINGCHI#issuecomment-572154141, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFW6PXAVMFFWDHYOVQCHHLQ4X65VANCNFSM4KCXS7AA .

Jan 08 '20 17:01 slorber

Hi,

for react-native-gesture-handler, the next release should have the fix (1.5.4, not yet published?), in the meantime you can use https://github.com/software-mansion/react-native-gesture-handler.git#95bfb4df7ce9b1e222d50ead99eee7e27cd79043

see also https://github.com/software-mansion/react-native-gesture-handler/issues/883

I'm going to take a look at reanimated soon.

So far the only stable gatsby/expo app published is being worked on here: https://github.com/expo/examples/pull/39

Jan 25 '20 15:01 slorber

Thanks! Should we close this?

Jan 26 '20 17:01 felippepuhle

I'll let this open because I'm not sure reanimated works yet

Jan 27 '20 16:01 slorber

It is not working yet, I am trying to use React navigation drawer /node_modules/react-native-reanimated/src/Transitioning.js SyntaxError: /home/.../node_modules/react-native-reanimated/src/Transitioning.js: Unexpected token (36:6)

34 | return props => { 35 | return (

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

May 21 '20 18:05 JorgeQuevedoC

Hi,

Not sure exactly what is happening here but it looks like a transpilation problem. What's your setup/versions @JorgeQuevedoC ? Also, could you try to use 3.1 and move this plugin first in the gatsby plugins array?

I was able to use Transitioning in web code, but i had a warning saying transition is not supported on web yet.

May 22 '20 10:05 slorber

any update on this? i'm encountering something similar (see below) Using latest expo (41) with latest version of gatsby-plugin-react-native-web (followed the steps in @EvanBacon 's tutorial. )

`failed Building static HTML for pages - 0.539s

ERROR #95313

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html

78 | 79 | const scheduleUpdates =

80 | Platform.OS === 'web' ? requestAnimationFrame : setImmediate; | ^ 81 | 82 | export default class AnimatedNode { 83 | __nodeID;

WebpackError: ReferenceError: requestAnimationFrame is not defined

AnimatedNode.js:80 node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedNode.js:80:27`

May 02 '21 17:05 ezekiel747

gatsby-plugin-react-native-web gatsby-plugin-react-native-web copied to clipboard

react-native-reanimated

gatsby-plugin-react-native-web
gatsby-plugin-react-native-web copied to clipboard