So I'm trying to connect my react front-end to an alchemy node using alchemy-web3 as it says in this tutorial from the official website:
https://docs.alchemy.com/docs/integrating-your-smart-contract-with-the-frontend
The problem comes when I create that interact.js file and gives me an error saying:
TypeError: Cannot set property Request of # which has only a getter
I've seen other questions with this same error but using web3 library. In my case, I'm using that other library, alchemy-web3 (even if it's a wrapper of Web3) in a Nextjs. Do you know how to fix this problem, or if you know any documentation to connect a front-end with an alchemy node but maybe using web3 in a Nextjs app? That is important, in a Nextjs.
Related
I have a tricky situation over here. I have used an npm module:- use-places-autocomplete to get autocomplete suggestions from google maps autocomplete API. Below is the link for the npm module and the CDN link I am using in my react app in public index.html.
Link:- https://www.npmjs.com/package/use-places-autocomplete
CDN:- "https://maps.googleapis.com/maps/api/js?key={MY_API_KEY}&libraries=places®ion=us"
The issue is coming when I am testing this link in tests. I am using Jest and React testing library. I am not getting any response (mock response which i have hardcoded in the codebase) when i start typing in the address.
I have tried the following things:-
Mocking the use-places-autocomplete response. But it did not work.
Using MSW for intercepting the CDN. It also didnt work.
In the test suite, adding the script of Google API in beforEach and then rendering the component. It also didnt work.
Can anybody please help me in this. Thanks in advance.
I am trying to link stripe payment to react native expo using the #stripe/stripe-react-native package but i am getting error while providing publishable key to stripe provider element
You need to update to the latest version of Expo.
https://github.com/stripe/stripe-react-native#typeerror-null-is-not-an-object-evaluating-_nativestripesdkdefaultinitialise-on-android
Looks Like, SDK is not initialised properly.
SDK functions call before SDK is initialised Please follow the steps of SDK
configuration.
https://www.npmjs.com/package/#stripe/stripe-react-native
i'm trying to use native base with react native web with out a lot of success, i tried looking for info if this is even possible but there doesn't seem to be a lot of info available.
I tried importing it but i get this error:
SyntaxError /node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js: Unexpected token (14:12) native-base
Here is a conde sandbox with the error https://codesandbox.io/s/react-native-web-native-base-3cih6?file=/src/App.js
I'm currently trying to build a web app compatible with the Google Progressive Web Apps specs. To do this i use Angular with Dart and Polymer based Webcomponents instead of the Angular components. So far everything works as expected. To make the app offline capable utilizing the Service-Worker API i use the following dart lib: https://github.com/isoos/service_worker
Using either Polymer or Service-Worker works fine but combining booth just exits with an error on app startup.
This is my AppComponent startup routine:
// ... other imports
import 'package:service_worker/window.dart' as sw; // <-- import alone causes the error
Future main() async {
await initPolymer(); // <-- causes the error in combination with the import above
bootstrap(AppComponent);
if (sw.isNotSupported) {
print('ServiceWorkers are not supported.');
return;
}
//... initializing service worker
}
The error occurs even if i'm not initializing the Service-Worker, importing the Service-Worker module is enough to cause the error.
Building the app works without any errors.
I'm new to Dart and the Polymer and Angular eco systems and the error message i get is not very helpful to me:
Uncaught Error: NoSuchMethodError: method not found: js_helper.dart:1742 'h' (J.Q(...).h is not a function)
at Object.J.H (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9747:15)
at http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:10559:1584
at Isolate.e.(anonymous function) (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:10608:15)
at Object.yK (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9291:22)
at http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9282:10
at yM.a (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2612:72)
at yM.dart.yM.$2 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2828:24)
at y9.dart.y9.$1 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2824:31)
at xM.bi (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:3767:40)
at xk.$0 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:3167:16)
Can you give me a hint what could cause the error and how to fix it? I would very much like to use the Polymer components instead of the plain Angular components but i need the Service-Worker for offline caching support.
This looks like an issue caused by incompatibility between dart:js (the old style, used by the original polymer package) and package:js (the new style, used by all new packages, including package:service_worker).
You might want to have a look at the polymerize project, which brings Polymer via the new-style interop. Then you'll have no conflict.
I want to start by saying this is my first project with React Redux and Socket.IO.
I also have no knowledge of what it takes to construct proper build, start, and test scripts. My knowledge of webpack is also pretty limited to the point where I only really feel comfortable adding or removing loaders. I find a lot of the pre-configurations in create react app to be very helpful; jest, hot loading, build outputs. As you know react-create-app uses webpackdev server. However, for the server side portion of my app I have a socket.io server similar to this configuration.
import Server from 'socket.io';
export function startServer(store) {
const io = new Server().attach(8090);
store.subscribe(
() => io.emit('state', store.getState().toJS())
);
io.on('connection', (socket) => {
socket.emit('state', store.getState().toJS());
socket.on('action', store.dispatch.bind(store));
});
}
Basically I am looking for a resource or even better an explanation that can help me incorporate socket io and redux with the best parts of react-create-app.
I ended up getting rid of webpack entirely and removed the scripts. I rewrite the test script to a simple jest command. Followed this to finish up the socket.io config. https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html
You can also see how the application looks like right now. https://github.com/donleyac/react-card-engine
For the client side I suggest to manage the project following this guide.
Redux guide
For the socket.io integration I suggest using my two redux middlewares that allows you to subscribe events and emit messages using the redux paradigm.
socket.io-emitter-middleware
socket.io-subscriber-middleware
You can install them via the following commands
npm i socket.io-emitter-middleware
npm i socket.io-subscriber-middleware
and following the README from github documentation for the usage.
The server part could go well.
You must not confuse the create-react-app environment with the client/server architecture. The create-react-app environment is only "client side".
You need connect your client react app with the node.js server via socket.io.
I suggest you to start from the socket.io documentation.
Socket.io Introduction