The development server returned response error code: 500

[vishalpql]

Getting error while running react native app after installation of algosdk

Error: While trying to resolve module vlq from file /Users/macbook-pro/React_apps/my-wallet-app/src/algosdk/dist/cjs/logic/sourcemap.js, the package /Users/macbook-pro/React_apps/my-wallet-app/node_modules/vlq/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/macbook-pro/React_apps/my-wallet-app/node_modules/vlq/dist/index.cjs. Indeed, none of these files exist:

• /Users/macbook-pro/React_apps/my-wallet-app/node_modules/vlq/dist/index.cjs(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.svg|.native.svg|.svg)
  • /Users/macbook-pro/React_apps/my-wallet-app/node_modules/vlq/dist/index.cjs/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.svg|.native.svg|.svg)
    at DependencyGraph.resolveDependency (/Users/macbook-pro/React_apps/my-wallet-app/node_modules/metro/src/node-haste/DependencyGraph.js:243:17)
    at Object.resolve (/Users/macbook-pro/React_apps/my-wallet-app/node_modules/metro/src/lib/transformHelpers.js:129:24)
    at resolve (/Users/macbook-pro/React_apps/my-wallet-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
    at /Users/macbook-pro/React_apps/my-wallet-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
    at Array.reduce ()
    at resolveDependencies (/Users/macbook-pro/React_apps/my-wallet-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
    at processModule (/Users/macbook-pro/React_apps/my-wallet-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
    at async addDependency (/Users/macbook-pro/React_apps/my-wallet-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
    at async Promise.all (index 22)
    at async processModule (/Users/macbook-pro/React_apps/my-wallet-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:198:5)

OS: Android
React native version: 0.69.4
React version: 18.2.0
algosdk: 2.4.0

Expected behaviour: App should work perfectly, and user can generate new wallet using algosdk

Actual behaviour: React Native bundler server error (error code: 500)

[Eric-Warehime]

We don't fully support react-native out of the box, but we do try to keep up to date on what works and what doesn't so we can point people in the right direction.

That being said, I haven't seen this error reported before. I'm not sure what your react-native setup looks like but it seems like facebook/metro#535 (comment) might be related to your issue.

The vlq library itself is definitely properly bundling their outputs https://github.com/Rich-Harris/vlq/blob/master/rollup.config.js#L4 so I assume it's an issue w/ react-native supporting cjs.

[winder]

Closing due to no response, please re-open with the requested information if this continues to be a problem.