[bug]: Dynamic require of "react-native" is not supported on react native web

[DoxasticFox]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.7.3

What's Wrong?

This error appears in the browser console when importing '@react-spring/native' in react native:

Uncaught Error: Dynamic require of "react-native" is not supported
    node_modules bundle.js:60559
    node_modules bundle.js:60630
...

To Reproduce

1. Initialize a new project, as described in expo's documentation.
2. Run npm install @react-spring/native
3. Add these lines to the generated App.tsx:

   import { useSpring, animated } from '@react-spring/native';
   
   // These ensure lazy loading doesn't prevent the import
   console.log(useSpring);
   console.log(animated);
   

4. Start the app: npx expo start and press w to open your browser.
5. The app will fail to load and the browser console will show the error: Uncaught Error: Dynamic require of "react-native" is not supported.

Expected Behaviour

No error.

Link to repo

https://github.com/DoxasticFox/react-spring

[giaset]

Bumping this, as we're also dealing with this same issue

[joshuaellis]

I've not looked at the example given, but we don't dynamically import react-native as far as I can see? So I'm confused how this is our error.

The error message provided also doesn't directly point to react-spring. Is there more information that can be shared?

[giaset]

Hey @joshuaellis, thanks for the quick response.

Here's the full error from the console:

index.ts:24 Uncaught Error: Dynamic require of "react-native" is not supported
    at index.ts:24:1
    at ./node_modules/@react-spring/native/dist/react-spring_native.modern.mjs (index.ts:14:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./components/PressableWithHaptics.tsx (PressableText.tsx:28:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./components/Button.tsx (BottomSheetRedepositContent.tsx:120:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)

The relevant line from index.ts looks like this:

    Globals.assign({
  batchedUpdates: require('react-native').unstable_batchedUpdates,
  createStringInterpolator,
  colors,
})

[ktml]

I also have this issue with 9.7.0+. Downgrading to 9.6.1 fixed the issue.