after upgrading npm ugrade i am getting below error, i cant use sqllite in Web browser, Please let me know how to fix

[lajith111]

index.js:489
[webpack-dev-server] WARNING in ./node_modules/jeep-sqlite/dist/esm/jeep-sqlite.entry.js 2926:20-37
Module not found: Error: Can't resolve 'crypto' in 'D:\Personal\Workspace\CorePigmyApp\node_modules\jeep-sqlite\dist\esm'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
initialize.app.service.ts:41 initializeAppError: Error: The jeep-sqlite element is not present in the DOM! Please check the @capacitor-community/sqlite documentation for instructions regarding the web platform.

[jepiqueau]

@lajith111 can you share your package.json. which framework are you using. Did this also happen in the tutorial apps références in the sqlite plugin readme

[lajith111]

Please find below & it will not happen in toturial app & i have completed delted nnode modues & reinstalled again..same error
I did not kept my old package.json to revert back to old package

{
  "name": "corepigmy",
  "version": "5.0.0",
  "author": "Fintech",

  "scripts": {
    "ng": "ng",
    "start": "npm run copy:sql:wasm && ng serve",
    "build:native": "npm run remove:sql:wasm && ng build",
    "watch": "npm run copy:sql:wasm && ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "ionic:serve:before": "npm run copy:sql:wasm",
    "copy:sql:wasm": "copyfiles -u 3 node_modules/sql.js/dist/sql-wasm.wasm src/assets",
    "remove:sql:wasm": "rimraf src/assets/sql-wasm.wasm",
    "ionic:ios": "npm run remove:sql:wasm && ionic capacitor build ios",
    "ionic:android": "npm run remove:sql:wasm && ionic capacitor build android"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.2",
    "@angular/common": "^17.0.2",
    "@angular/compiler": "^17.0.2",
    "@angular/core": "^17.0.2",
    "@angular/forms": "^17.0.2",
    "@angular/platform-browser": "^17.0.2",
    "@angular/platform-browser-dynamic": "^17.0.2",
    "@angular/router": "^17.0.2",
    "@awesome-cordova-plugins/android-permissions": "^6.6.0",
    "@awesome-cordova-plugins/bluetooth-serial": "^6.6.0",
    "@awesome-cordova-plugins/core": "6.6.0",
    "@awesome-cordova-plugins/file": "^6.6.0",
    "@awesome-cordova-plugins/sms": "^6.6.0",
    "@capacitor-community/bluetooth-le": "^3.1.2",
    "@capacitor-community/sqlite": "^5.7.1",
    "@capacitor/android": "5.7.2",
    "@capacitor/app": "5.0.7",
    "@capacitor/core": "5.7.2",
    "@capacitor/device": "5.0.7",
    "@capacitor/filesystem": "5.2.1",
    "@capacitor/haptics": "5.0.7",
    "@capacitor/keyboard": "5.0.8",
    "@capacitor/network": "5.0.7",
    "@capacitor/preferences": "5.0.7",
    "@capacitor/splash-screen": "^5.0.7",
    "@capacitor/status-bar": "^5.0.7",
    "@ionic/angular": "^7.8.1",
    "@ionic/cli": "^7.2.0",
    "@ionic/core": "^7.7.4",
    "android": "^0.0.8",
    "cordova-plugin-android-permissions": "^1.1.5",
    "cordova-plugin-bluetooth-serial": "^0.4.7",
    "cordova-plugin-file": "^6.0.2",
    "cordova-res": "^0.15.4",
    "cordova-sms-plugin": "^1.0.3",
    "crypto-browserify": "^3.12.0",
    "esc-pos-encoder": "^2.0.1",
    "ionicons": "^7.0.0",
    "jeep-sqlite": "^2.6.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.0",
    "@angular-eslint/builder": "^17.0.0",
    "@angular-eslint/eslint-plugin": "^17.0.0",
    "@angular-eslint/eslint-plugin-template": "^17.0.0",
    "@angular-eslint/schematics": "^17.0.0",
    "@angular-eslint/template-parser": "^17.0.0",
    "@angular/cli": "^17.0.0",
    "@angular/compiler-cli": "^17.0.2",
    "@angular/language-service": "^17.0.2",
    "@capacitor/cli": "^5.7.4",
    "@ionic/angular-toolkit": "^9.0.0",
    "@types/jasmine": "~5.1.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^7.26.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~5.1.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.2.2"
  },
  "description": "Core Pigmy"
}

[jepiqueau]

@lajith111 did you temove the angular cache and the browser cache. Can you check in the browser if the <,jeep-sqlite> tag is there

[lajith111]

Yes i removed both cache already .. I have currently using 17.0.0 but in angular cache version showing 17.3.0 is that issue?

<,jeep-sqlite> in browser where i have to check?

EDIT: In index db i have checked SQL lite related not created

[lajith111]

when i run ionic info

ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

       Require stack:
       - C:\Users\lajith.kumar\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\lajith.kumar\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\lajith.kumar\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\lajith.kumar\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

   Ionic CLI                     : 7.2.0 (C:\Users\lajith.kumar\AppData\Roaming\npm\node_modules\@ionic\cli)       
   Ionic Framework               : @ionic/angular 7.8.2
   @angular-devkit/build-angular : 17.3.2
   @angular-devkit/schematics    : 17.3.2
   @angular/cli                  : 17.3.2
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.7.4
   @capacitor/android : 5.7.2
   @capacitor/core    : 5.7.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 2.0.1

System:

   NodeJS : v20.12.0 (C:\Program Files\nodejs\node.exe)
   npm    : 10.5.0
   OS     : Windows 10

[jepiqueau]

In your browser you inspect the éléments and you go to the tab element in the developer tools you must see the jeep-sqlite tag

[lajith111]

[jepiqueau]

@lajith111 try to clone the tutorial and install it i shoyld load the latest of angular check the version when installed and test it.. i am travelling so i will not be able to help you more. Tell me if the tutorial updated to the latest release works

[lajith111]

@jepiqueau thanks

[lajith111]

@jepiqueau i missed while copiying error . i am also getting below error while ionic s

./node_modules/jeep-sqlite/dist/esm/jeep-sqlite.entry.js:2926:20-37 - Warning: Module not found: Error: Can't resolve 'crypto' in 'D:\Personal\Workspace\CorePigmyApp\node_modules\jeep-sqlite\dist\esm'

[jepiqueau]

@lajith111 jeep-sqlite does not use 'crypto' module in fact the latest release of sql.js did, so the build of jeep-sqlite esm/jeep-sqlite-entry.js referred to crypto. To avoid the error message in angular create a webpack.config.js file including

module.exports = {
  resolve: {
    fallback: {
      crypto: false
      // Add more fallbacks if needed
    }
  }
};

[lajith111]

Latest Version fixed the issue..Thanks

[jepiqueau]

@lajith111 sorry for the time it takes to fix it. Thank you for your feeback.