2.27.1 / 2.28.0 Bug with Web Transpilation

[ChrisEdson]

Description

On upgrading to 2.27.1 (which persists on 2.28.0), I believe NativeViewGestureHandler.ts is not being transpiled to JavaScript for use on React Native Web.

This may be user error here, but I'm not sure.

All files seem to have been transpiled correctly within lib/module/web - with the exception of NativeViewGestureHandlers.ts.

This results in the following error in React Native Web:

ERROR in ./node_modules/react-native-gesture-handler/lib/module/web_hammer/NativeViewGestureHandler.ts 12:15
Module parse failed: Unexpected token (12:15)
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
|   }
|
>   onRawEvent(ev: HammerInputExt) {
|     super.onRawEvent(ev);
|     if (!ev.isFinal) {
 @ ./node_modules/react-native-gesture-handler/lib/module/web/Gestures.js 15:0-84 34:28-58
 @ ./node_modules/react-native-gesture-handler/lib/module/RNGestureHandlerModule.web.js 5:0-58 26:27-35 29:27-35 33:27-41 39:27-41
 @ ./node_modules/react-native-gesture-handler/lib/module/init.js 4:0-62 15:4-34
 @ ./node_modules/react-native-gesture-handler/lib/module/index.js 3:0-36 30:0-10
 @ ./index.js 3:166-205

This can be fixed by putting the library through Babel in your Webpack config, but I think it may be a bug?

Steps to reproduce

1. Run React Native Web with the latest gesture-handler package; do not pass it through Babel

A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.

N/A

Gesture Handler version

2.27.1

React Native version

0.79.0

Platforms

Web

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

[m-bert]

Hi @ChrisEdson! Are you sure it started from 2.27.1? I've checked that on npm and as you can see it was already in .ts back then. I've also run build locally with the same result.

[ChrisEdson]

Hi @ChrisEdson! Are you sure it started from 2.27.1? I've checked that on npm and as you can see it was already in .ts back then. I've also run build locally with the same result.

You're correct!

Sorry, it actually started on 2.26.0.

[m-bert]

Well, it probably started even earlier. I believe this is due to usage of react-native-builder-bob, which tests for codegen specific files with this regex:

  return /(?:^|[\\/])(?:Native\w+|(\w+)NativeComponent)\.[jt]sx?$/i.test(filepath);

Now, as far as I can see it was changed, so I will try newer version and then get back to you 😅

[ChrisEdson]

You're a magician! I was trying to work out why that specific file had been excluded.

For what it's worth, the files were transpiled correctly in 2.25.0: https://www.npmjs.com/package/react-native-gesture-handler/v/2.25.0?activeTab=code

Perhaps some artifact from the monorepo change in 2.26.0, I'm not sure. Or perhaps react-native-builder-bob had a version bump.

[m-bert]

Perhaps some artifact from the monorepo change in 2.26.0

Maybe that's the case, I've checked #3482 and the version of react-native-builder-bob seems to be unchanged. However, it might have changed in one of the patch versions. I found that fix was merged in this commit and released in version 0.40.10:

Anyway, I've bumped bob in our repo and it seems to work fine. I'll prepare a PR.

[m-bert]

It would be great if you could confirm that #3751 fixes this issue 😅

[ChrisEdson]

It would be great if you could confirm that #3751 fixes this issue 😅

Thanks Michal, amazing work! It's a little difficult for me to test as the library uses Yarn to manage dependencies - so when pointing directly at your branch, the build steps don't quite work correctly.

But I have confidence that what you've done will fix it - it all makes sense.

[ChrisEdson]

Thanks for all your help on this @m-bert !

Would it be a huge pain to do a 2.28.1 or 2.29.0 release with this fix included? This is blocking my React Native upgrade right now.

[m-bert]

Hi @ChrisEdson! If everything goes well, it will be released today 😅