Web-only app breaks

[nandorojo]

Description

react-native isn't used on Web. This check should be moved to a native-only file.

Steps to reproduce

Create a web-only project that imports RNGH.

Snack or a link to a repository

https://stackblitz.com/edit/nextjs-tcj82d?file=pages%2Findex.tsx,package.json,next.config.js,rn-pkc.json

Gesture Handler version

2.13.4

React Native version

N/A

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

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

[bartlomiejbloniarz]

@nandorojo shouldn't react-native-gesture-handler be added to the transpiled packages list in next.config.js?

module.exports = withExpo({
  /** @type {import('next').NextConfig} */
  transpilePackages: [
    'moti',
    'react-native-reanimated',
    'react-native',
    'react-native-gesture-handler',
  ],
});

[nandorojo]

Yes, but the version you're going to get from this package isn't going to be useful. It'll be the RNW version. So I think it would make sense to move this to a native-only file either way.

[nandorojo]

I should have clarified in the original post that checking the version, even when the error is silenced, doesn't make much sense for web.

[m-bert]

Hi @nandorojo! IIRC React Native version is not considered on web. REACT_NATIVE_VERSION is used only inside GestureDetector, in code section that is not executed on web (see this line for context).

[chriscoomber]

I have the exact same error, and I am adding 'react-native-gesture-handler' to transpilePackages already - that doesn't appear to fix the error. (Indeed, I tried it on a fork of @nandorojo's repro and it didn't fix the error there.) So I think this is still a bug, unless I'm missing something.

The error goes away if you install react-native in addition to react-native-web in your app, not that I'm suggesting that's a sane workaround.

Would it be possible to split utils.ts into utils.ts and utils.web.ts (with the latter containing a dummy implementation which doesn't attempt to import react-native/package.json)?

[nandorojo]

Yeah this would make the most sense.

The reason is because the RNW resolution from Webpack doesn't work for .json files. So importing from react-native/package.json does not map to react-native-web/package.json

This code should be moved to a native-only file if web compatibility is a relevant feature.