React Native app cant install package with Solana dependency - javascript

Installing a package that requires solanaweb3js in React Native throws an error.
I found that i am not alone with this but i could not make the provided solutions work for me.
Error:
Error: Unexpected token name «n», expected punc «,» in file node_modules/solana-test-package/node_modules/#solana/web3.js/lib/index.native.js at 4581:32
at /Users/darjusch/development/solana/wallet-sdk/node_modules/metro-transform-worker/src/index.js:279:15
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Users/darjusch/development/solana/wallet-sdk/node_modules/metro-transform-worker/src/index.js:146:24)
at _next (/Users/darjusch/development/solana/wallet-sdk/node_modules/metro-transform-worker/src/index.js:168:9)
at /Users/darjusch/development/solana/wallet-sdk/node_modules/metro-transform-worker/src/index.js:175:7
at new Promise (<anonymous>)
at /Users/darjusch/development/solana/wallet-sdk/node_modules/metro-transform-worker/src/index.js:164:12
at minifyCode (/Users/darjusch/development/solana/wallet-sdk/node_modules/metro-transform-worker/src/index.js:289:17)
at Object.<anonymous> (/Users/darjusch/development/solana/wallet-sdk/node_modules/metro-transform-worker/src/index.js:569:40)
info Run CLI with --verbose flag for more details.
> Task :app:bundleReleaseJsAndAssets FAILED
FAILURE: Build failed with an exception.
Reproducing the error:
Gitclone:
https://github.com/Darjusch/AwesomeProject
OR
npx react-native init AwesomeProject
npm i solana-test-package
I uploaded that npm packge to reproduce the issue:
https://github.com/Darjusch/solana-test-package
This is the content of the package:
index.js
const { Keypair } = require('#solana/web3.js');
export function generateKeypair() {
const keypair = Keypair.generate();
console.log(`Generated Solana publickey is ${keypair.publicKey.toBase58()}`);
return keypair;
}
package.json
"dependencies": {
"#solana/web3.js": "^1.54.0"
}
Any help appriciated!

That error implies that your JavaScript runtime does not understand BigInt literals (eg. 2n). Newer runtimes like Hermes circa React Native 0.70.0 added support for them.
Follow the updated React Native project initialization instructions at https://solanacookbook.com/integrations/react-native.html#how-to-use-solana-web3-js-in-a-react-native-app

Related

react-native cocoapods Error message : Looks like your iOS environment is not properly set

-When I configure the environment and run the following command
npx react-native init AwesomeProject
Error message
An error occurred while installing json (2.6.3), and Bundler cannot continue.
Make sure that `gem install json -v '2.6.3' --source 'https://rubygems.org/'`
succeeds before bundling.
In Gemfile:
cocoapods was resolved to 1.11.3, which depends on
cocoapods-core was resolved to 1.11.3, which depends on
algoliasearch was resolved to 1.27.5, which depends on
json
✖ Installing Bundler
error Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
Error: Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
at createFromTemplate (/opt/homebrew/lib/node_modules/react-native/node_modules/#react-native-community/cli/build/commands/init/init.js:129:11)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Object.initialize [as func] (/opt/homebrew/lib/node_modules/react-native/node_modules/#react-native-community/cli/build/commands/init/init.js:181:3)
at async Command.handleAction (/opt/homebrew/lib/node_modules/react-native/node_modules/#react-native-community/cli/build/index.js:106:9)
info Run CLI with --verbose flag for more details.
I hope that no error will be reported when downloading the project
-Additional information
my Ruby version is :2.7.6
my Mac is :macOs Monterey 12.5.1
my Xcodeis :14.2(14C18)
my pod is : 1.11.3

import fs.default.cp Sync is not a function

Tried to install TurboRepo, but after selecting npm got this error.
>>> TURBOREPO
>>> Welcome to Turborepo! Let's get you set up with a new codebase.
? Where would you like to create your turborepo? ./my-turborepo
? Which package manager do you want to use? npm
Aborting installation.
Unexpected error. Please report it as a bug:
TypeError: import_fs.default.cpSync is not a function
at run (C:\Users\singh.yogesh\AppData\Roaming\npm-cache\_npx\5504\node_modules\create-turbo\dist\index.js:338:21)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
if you upgrade to node version 16, this error won't appear.

Importing tensorflow in vite

Apologies in advance as I'm sure these are rather trivial matters - I am in the "hello world" phase of learning front-end development.
I have a hello-world vite app, which I created and ran simply via:
npm init #vitejs/app
cd hello-vite
npm install npm run dev
I'm able to view the outputted localhost url in my browser.
I also have a simple script that imports tensorflow and does something with it:
$ cat test.mjs
import * as tf from '#tensorflow/tfjs-node'
const a = tf.tensor([[1, 2], [3, 4]]);
a.print();
$ node test.mjs
2022-06-27 22:04:16.968270: I tensorflow/core/platform/cpu_feature_guard.cc:151] This TensorFlow binary is optimized with oneAPI Deep Neural Network Library (oneDNN) to use the following CPU instructions in performance-critical operations: AVX2 AVX512F FMA
To enable them in other operations, rebuild TensorFlow with the appropriate compiler flags.
Tensor
[[1, 2],
[3, 4]]
Now I want to get this test.mjs behavior within my hello-vite app. So I tried something like:
$ cat main.ts
import './style.css'
import * as tf from '#tensorflow/tfjs-node'
const a = tf.tensor([[1, 2], [3, 4]]);
a.print();
document.querySelector('#app').innerHTML = `
<h1>Hello Vite!!!</h1>
Documentation
`
But when I run npm run dev, it doesn't seem happy, and spouts seemingly unrelated complaints about aws stuff:
$ npm run dev
> hello-vite#0.0.0 dev
> vite
vite v2.9.12 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 112ms.
✘ [ERROR] Could not resolve "mock-aws-s3"
node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js:43:28:
43 │ const AWSMock = require('mock-aws-s3');
╵ ~~~~~~~~~~~~~
You can mark the path "mock-aws-s3" as external to exclude it from the bundle, which will remove
this error. You can also surround this "require" call with a try/catch block to handle this
failure at run-time instead of bundle-time.
✘ [ERROR] Could not resolve "aws-sdk"
node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js:76:22:
76 │ const AWS = require('aws-sdk');
╵ ~~~~~~~~~
You can mark the path "aws-sdk" as external to exclude it from the bundle, which will remove this
error. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.
✘ [ERROR] Could not resolve "nock"
node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js:112:23:
112 │ const nock = require('nock');
╵ ~~~~~~
You can mark the path "nock" as external to exclude it from the bundle, which will remove this
error. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.
10:06:42 PM [vite] error while updating dependencies:
Error: Build failed with 3 errors:
node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js:43:28: ERROR: Could not resolve "mock-aws-s3"
node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js:76:22: ERROR: Could not resolve "aws-sdk"
node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js:112:23: ERROR: Could not resolve "nock"
at failureErrorWithLog (/home/dshin/vite_scratch/hello-vite/node_modules/esbuild/lib/main.js:1605:15)
at /home/dshin/vite_scratch/hello-vite/node_modules/esbuild/lib/main.js:1251:28
at runOnEndCallbacks (/home/dshin/vite_scratch/hello-vite/node_modules/esbuild/lib/main.js:1034:63)
at buildResponseToResult (/home/dshin/vite_scratch/hello-vite/node_modules/esbuild/lib/main.js:1249:7)
at /home/dshin/vite_scratch/hello-vite/node_modules/esbuild/lib/main.js:1358:14
at /home/dshin/vite_scratch/hello-vite/node_modules/esbuild/lib/main.js:666:9
at handleIncomingPacket (/home/dshin/vite_scratch/hello-vite/node_modules/esbuild/lib/main.js:763:9)
at Socket.readFromStdout (/home/dshin/vite_scratch/hello-vite/node_modules/esbuild/lib/main.js:632:7)
at Socket.emit (events.js:314:20)
at addChunk (_stream_readable.js:297:12)
Vite Error, /node_modules/.vite/deps/#tensorflow_tfjs-node.js?v=0ea0383e optimized info should be defined
If I comment out the print() call and the line before it, the errors disappear.
What am I doing wrong? How do I make sense of these errors?
I don't know too much, but #tensorflow/tfjs-node appears to just be a Node project, and won't work in the browser.
For example, node-pre-gyp is a C++ binding library for Node, that is definitely not going to work in the browser.
You can try doing npm install mock-aws-s3 and the other libraries that errored, see how far that gets you, but likely won't help.

Next.js doesn't load jsx

I have been searching about Next.js, the javascript framework of the moment, and I want to begin to practice. The problem is: it doesn't run in my computer by any means.
The natural form on creating a next project is with the command line:
npx create-next-app
or
yarn create next-app
The result is a template project with a file structure and a few scripts to run the server. The most basic script runs the server in development mode:
npm run dev
or
yarn dev
The result in terminal is the warning:
$ yarn dev
yarn run v1.22.5
$ next dev
(node:5348) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution
of the package at C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
ready - started server on http://localhost:3000
error - C:/Users/maths/Documents/codigos/node/my-app/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|
| function MyApp({ Component, pageProps }) {
> return <Component {...pageProps} />
| }
|
And when I enter the website in localhost:3000, the page on browser shows:
Internal Server Error
After making the http requisition from the browser, the terminal shows the following message:
event - build page: /next/dist/pages/_error
wait - compiling...
error - C:/Users/maths/Documents/codigos/node/my-app/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|
| function MyApp({ Component, pageProps }) {
> return <Component {...pageProps} />
| }
|
Error: Cannot find module 'C:\Users\maths\Meus Documentos\codigos\node\my-app\.next\server\pages-manifest.json'
Require stack:
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\load-components.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\api-utils.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-server.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\next.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\lib\start-server.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\cli\next-dev.js
- C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\bin\next
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
at Function.Module._load (node:internal/modules/cjs/loader:769:27)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (node:internal/modules/cjs/helpers:92:18)
at getPagePath (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js:1:
657)
at requirePage (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\require.js:1:
1062)
at loadComponents (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\load-compo
nents.js:1:807)
at DevServer.findPageComponents (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\ser
ver\next-server.js:74:296)
at DevServer.renderErrorToHTML (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\serv
er\next-server.js:126:120)
at DevServer.renderErrorToHTML (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\server\next-dev-
server.js:34:974)
at processTicksAndRejections (node:internal/process/task_queues:93:5)
at async DevServer.render (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\ne
xt-server.js:72:236)
at async Object.fn (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-serv
er.js:56:618)
at async Router.execute (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\rout
er.js:23:67)
at async DevServer.run (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\server\next-
server.js:66:1042)
at async DevServer.handleRequest (C:\Users\maths\Documents\codigos\node\my-app\node_modules\next\dist\next-server\se
rver\next-server.js:34:1081) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\require.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\load-components.
js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\api-utils.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\next-server\\server\\next-server.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\server\\next.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\server\\lib\\start-server.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\cli\\next-dev.js',
'C:\\Users\\maths\\Documents\\codigos\\node\\my-app\\node_modules\\next\\dist\\bin\\next'
]
}
I have tried several things to fix it, create the next project without the script from npx and yarn (by manually installing the dependencies), update versions of node and npm, etc. It seems that the program can't load the jsx, the first error points to the moment when the first jsx component appear in the code. The message says that webpack isn't configured with a valid loader to this code.
Environment:
Win 10
npm v7.3.0
node v15.5.0
next v10.0.4
react v17.0.1
react-dom v17.0.1
Downgrade your version of Nodejs to 14 or 12 Node version 15 will break your environment. If you want to still want to use 15 get node version switcher and switch the version based on the projects your working on.

Meteor app is crashing

I am very new to meteor and am trying to start a previous employees app. I downloaded the repo and installed meteor. When I installed the npm packages and did meteor run, the app crashed.
It gives me this error.
Your app is crashing. Here's the latest log:
{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
/Users/joey.diperi/.meteor/packages/meteor-tool/.1.3.2_4.yyk0ym.tlxjp++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:267
throw(ex);
^
Error: Match error: Missing key 'AWSAccessKeyId'
at exports.check (packages/check/match.js:34:1)
at new Slingshot.Directive (packages/edgee_slingshot/packages/edgee_slingshot.js:304:1)
at Object.Slingshot.createDirective (packages/edgee_slingshot/packages/edgee_slingshot.js:274:1)
at meteorInstall.server.config.slingshot.js (server/config/slingshot.js:1:11)
at fileEvaluate (packages/modules-runtime/.npm/package/node_modules/install/install.js:141:1)
at require (packages/modules-runtime/.npm/package/node_modules/install/install.js:75:1)
at /Users/joey.diperi/Documents/websites/bold_ideas/.meteor/local/build/programs/server/app/app.js:2723:1
at /Users/joey.diperi/Documents/websites/bold_ideas/.meteor/local/build/programs/server/boot.js:283:10
at Array.forEach (native)
at Function._.each._.forEach (/Users/joey.diperi/.meteor/packages/meteor-tool/.1.3.2_4.yyk0ym.tlxjp++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
Exited with code: 8
Your application is crashing. Waiting for file change.
I see in the startup.js page there are properties attached to the Meteor.settings object. Are the deployment keys usually kept in the Meteor.settings object in meteor?

Categories