react-spring icon indicating copy to clipboard operation
react-spring copied to clipboard

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

Open DoxasticFox opened this issue 1 year ago • 4 comments

Which react-spring target are you using?

  • [ ] @react-spring/web
  • [ ] @react-spring/three
  • [X] @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

DoxasticFox avatar Jan 26 '24 04:01 DoxasticFox