I am trying to get started by linking sqlite with react native on a simple app.. but somehow keep getting below error: I tried reinstall, relink, delete modules and yarn start...

Please help! Module is not found: Can't resolve 'react-native' even though sqlite.core.js file is in the ./node_modules/react-native-sqlite-storage/lib/sqlite.core.js

ERROR: "./node_modules/react-native-sqlite-storage/lib/sqlite.core.js Module not found: Can't resolve 'react-native' in 'C:\Users\accd8\Documents\1 Expertise\React\TechTim\my-app\node_modules\react-native-sqlite-storage\lib'"

Below is on the browser: Browser error message

Image to show library node_modules/react-native-sqlite-storage/lib/sqlite.core.js

my package jason:

####{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-native-sqlite-storage": "^5.0.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
####

APP.js

###import React from 'react'
import { useEffect } from 'react';
import { View, Text, Button } from 'react-native'
import SQLite from 'react-native-sqlite-storage'
const db = SQLite.openDatabase({
  location: "default",
  name: "SqliteDb"
}, () => {
  console.log('başarılı')
}, (err) => {
  console.log('hata')
})
const App = () => {

  useEffect(() => {
    db.transaction((tx) => {
      tx.executeSql("CREATE TABLE IF NOT EXISTS students (ID INTEGER PRIMARY KEY AUTOINCREMENT , Name TEXT, AGE INTEGER)", [], (tx, result) => {
        console.log('tx', tx)
        console.log('result', result)
      })
    })
  }, [])
  const createRecord = () => {
    for (let index = 0; index < 20; index  ) {
      const name = "Öğrenci"   index
      const age = Math.floor(Math.random() * 50)
      db.transaction((tx) => {
        tx.executeSql('INSERT INTO students (Name,Age) VALUES(?,?)', [name, age], (tx, result) => {
          console.log('tx', tx)
          console.log('result', result)

        })
      })
    }
  }
  const readRecord = () => {
    db.transaction((tx) => {
      tx.executeSql('SELECT * FROM students', [], (tx, result) => {
        console.log('result', result)
        for (let index = 0; index < result.rows.length; index  ) {
          console.log(result.rows.item(index))

        }
      })
    })
  }
  const deleteRecord = () => {
    db.transaction((tx) => {
      tx.executeSql('DELETE FROM students where id = ? ', [1], (tx, result) => {
        console.log(`tx`, tx)
        console.log(`result`, result)

      })
    })
  }
  return (
    <View>
      <Button title="Ekle" onPress={createRecord} />
      <Button title="Sil" onPress={deleteRecord} />
      <Button title="Oku" onPress={readRecord} />

      <Text>
        React Native sqlite
      </Text>
    </View>
  )
}
export default App


/*import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
*/

CodePudding user response：

You're using React, not React Native, those are two different things. React is used for web, React Native is used for mobile. You can't install React Native packages on a React project.

Also, there is no current sqlite implementation for web.

However you can use Local Storage to save data in client's browser, or store the database things on a server.