Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v4] | [v2] Module not found: react-native #1800

Closed
OJthe123 opened this issue Apr 15, 2024 · 4 comments
Closed

[v4] | [v2] Module not found: react-native #1800

OJthe123 opened this issue Apr 15, 2024 · 4 comments
Labels
bug Something isn't working no-issue-activity

Comments

@OJthe123
Copy link

Bug

I created an react app an try to use the BottomSheet.

Then it fails to compile with about 50 Errors

Module not found: Error: Can't resolve 'react-native' in '/home/oj/ReactProjects/trends/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheet'

Environment info

Windows 11 with UBUNTU WSL.

"dependencies": {
   "@gorhom/bottom-sheet": "^4.6.1",
   "@testing-library/jest-dom": "^5.17.0",
   "@testing-library/react": "^13.4.0",
   "@testing-library/user-event": "^13.5.0",
   "@types/jest": "^27.5.2",
   "@types/node": "^16.18.96",
   "@types/react": "^18.2.78",
   "@types/react-dom": "^18.2.25",
   "react": "^18.2.0",
   "react-dom": "^18.2.0",
   "react-native": "^0.73.6",
   "react-native-gesture-handler": "^2.16.0",
   "react-native-reanimated": "^3.8.1",
   "react-scripts": "5.0.1",
   "typescript": "^4.9.5",
   "web-vitals": "^2.1.4" 

Steps To Reproduce

npx create-react-app trends --template typescript
cd trends
npm install react-native
npm install react-native-reanimated
npm install react-native-gesture-handler
npm start

Describe what you expected to happen:

  • compile an run

Reproducible sample code

import React from 'react';
import logo from './logo.svg';
import './App.css';
import BottomSheet from '@gorhom/bottom-sheet';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <BottomSheet snapPoints={['50%', '70%']} >
        <p>Awesome Sheet</p>
      </BottomSheet>
    </div>
  );
}

export default App;
@OJthe123 OJthe123 added the bug Something isn't working label Apr 15, 2024
@OJthe123
Copy link
Author

image

@OJthe123
Copy link
Author

Found, that installing react-native-web solves this Issue.
But then I get
Error: DEV is not defined....

Copy link

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

Copy link

This issue was closed because it has been stalled for 5 days with no activity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working no-issue-activity
Projects
None yet
Development

No branches or pull requests

1 participant