We Keep Coding

importing ConnectButton from web3uikit gives Error: Invalid hook call. Hooks can only be called inside of the body of a function component

I am using nextjs along with tailwind css and a bunch of other libraries like web3uikit.
the app work totally fine but as soon as I import ConnectButton from web3uikit and use it in the sidebar component, it gives me the following error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Here's the link to the github repo, just cloning and install the dependencies would help you in setting up the project and then npm run dev.
Link: https://github.com/oneknucklehead/marketplace-web3

I believe it is a server-side rendering issue! A screenshot of how I got the <ConnectButton /> to render in a nextjs application is below:
Implementing the ConnectButton Component Screenshot
When the error popped up saying I had an invalid hook call, I closed the error box and the button was rendered in and when I click on it, it showed the web3Modal with the proper sign-in options. I thought that maybe it was a server-side issue
So I fixed it by using a useState hook with a boolean value as seen in the screenshot. It is false by default but will only become true when the component loads in(used a useEffect hook to implement) and I take advantage of that via conditional rendering which is also shown in the screenshot. Once I did that, I haven't encountered the issue at all! Hope this helps!

Go to node_modules -> web3uikit-> node_modules and delete the react folder under it.
web3uikit node module has a version of react pre-installed with it. Apparently, that's causing errors. Now, why does deleting the folder fix the error? Honestly, I don't know, but it removed the error. This answer is from someone named David MacDonald.

Why resolve function executed two times in Promise? [duplicate]

I heard that strict mode helps to write React code in best practices way by throwing warnings for life cycle methods removal. I read about it from this article on Medium.
Is my understanding correct? How effective is strict mode? Is it only for unsafe life cycle methods? If not can I use this feature in functional components?
import { StrictMode } from "react";
class Test extends Component{
render(
<StrictMode>
//Some other child component which has all lifecycle methods implemented in it
</StrictMode>
);
}

React's StrictMode is sort of a helper component that will help you write better React components, you can wrap a set of components with <StrictMode /> and it'll basically:
Verify that the components inside are following some of the recommended practices and warn you if not in the console.
Verify the deprecated methods are not being used, and if they're used strict mode will warn you in the console.
Help you prevent some side effects by identifying potential risks.
As the documentation says, strict mode is development oriented so you don't need to worry about it impacting on your production build.
I've found it especially useful to implement strict mode when I'm working on new code bases and I want to see what kind of code/components I'm facing. Also if you're on bug hunting mode, sometimes it's a good idea to wrap with <StrictMode /> the components/blocks of code you think might be the source of the problem.
So yeah, you're in the correct path to understanding strict mode, keep it up, I think it's one of those things you understand better when you play with them, so go ahead and have some fun.

Warning: StrictMode will render the components twice only on the development
mode not production.
For instance, if you're using getDerivedStateFromProps method like so:
static getDerivedStateFromProps(nextProps, prevState){// it will call twice
if(prevState.name !== nextProps.name){
console.log(`PrevState: ${prevState.name} + nextProps: ${nextProps.name}`)
return { name: nextProps.name }
}
return {}
}
The getDerivedStateFromProps method will call twice.
Just to let you know this is not a problem, it's just because you're wrapping your main component with <StrictMode> in the index.js file.
StrictMode renders components twice in order to detect any problems with your code and warn you about them.

In short, StrictMode helps to identify unsafe, legacy, or deprecated APIs/lifecycles. It's used for highlighting possible problems. Since it's a developer tool, it runs only in development mode. It renders every component inside the web app twice in order to identify and detect any problems in the app and show warning messages.

StrictMode is a tool for highlighting potential problems in an application. Like Fragment, StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.

ExtJS Ext.state.Manager.setProvider() behavior in 6.2 vs 4.x

I have an existing ExtJS application I'm upgrading from 4.x to 6.2.0. I had a simple storage provider setter that I pass into my Ext.onReady() block that looks like the following:
Ext.state.Manager.setProvider(Ext.create('Ext.state.LocalStorageProvider',{}));
When I swapped to 6.2.0, I'd get the error:
ext-all-rtl-debug.js:9389 [E] Ext.util.LocalStorage.constructor(): Cannot create duplicate instance of local store "ext". Use Ext.util.LocalStorage.get() to share instances.
So what I had to do to, what I think is a fix, was the following:
Ext.state.Manager.setProvider(Ext.util.LocalStorage.get('id'));
My concern here though is that I'm just applying a bandaid to the problem and not really going through with a real fix. I don't explicitly set the provider anywhere else, all I did was swap out the ExtJS lib from 4.x to 6.2.0 to get that error. It's as-if it's being created somewhere else first in the 6.2.0 initialization process and now I'm getting a duplicate error as aforementioned.
What has changed in 6.2.0 to cause this behavior? Is there now two providers set, one by ExtJS and one with my client code? Is there a cleaner way of handling this?

The preconditions for this error are the same in both, ExtJS 4 and ExtJS 6. The corresponding file does not have changed: compare ExtJS 4.2.4 version and ExtJS 6.2.0 version.
Because of this your application must be responsible for this. Somewhere in your (upgraded) code an instance of Ext.util.LocalStorage must be created. Since this error is thrown in case the ID is already registered and the registration is done only in the constructor of the Ext.util.LocalStorage class, I'd suggest to set a breakpoint right there to check in the stacktrace which function does call the constructor method.

Unknown props - react and material-ui

Currently I'm using react and material-ui and I've the following code in my component.
<Dialog
title="Dialog With Actions"
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}>
Are you sure that you want to proceed?
</Dialog>
I've imported
import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
But I'm always getting the following error message
Warning: Unknown prop `onKeyboardFocus` on <button> tag. Remove this prop from the element.
Warning: Unknown prop `keyboardFocused` on <button> tag. Remove this prop from the element.

Use react-tap-event-plugin to resolve this issue. After installing do this -
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

First, this is a warning and not an error message i.e. your code is still working. If you follow the link in the warning message, you can find out that:
The unknown-prop warning will fire if you attempt to render a DOM
element with a prop that is not recognized by React as a legal DOM
attribute/property. You should ensure that your DOM elements do not
have spurious props floating around.
There are more details and the possible reasons, but if I have to speculate you are passing all props to the button element.
Also interesting is a comment bellow the note:
For anyone who is curious/wondering why this new warning exists...
Historically, React has maintained a whitelist of all valid DOM
attributes, and we would strip unrecognized attributes. This approach
has a couple major downsides:
Performance: It means we must do a check for every prop on every DOM element, to sanity check that the prop is valid, and strip the
prop if it is not legal. This is silly, because the majority of
elements are completely safe (no illegal attributes) and thus the
checks are just wasted CPU cycles.
The old technique forced us to maintain a huge whitelist of all possible DOM attributes. This is a pain to maintain, but more
importantly, if we accidentally miss one or browser vendors add a new
one, it means that prop can't be used until we update our whitelist
The old technique is less flexible because it is impossible to render a non-standard attribute. While rendering non-standard
attributes is not recommended (you should use a data- attribute
instead), sometimes there are situations/frameworks that require
it. It sucks that React previously couldn't support it.
As we move toward removing this whitelist, we need to give people an
opportunity to clean up their existing apps. This way, an upgrade
doesn't result in us dumping a ton of unexpected props into the DOM.
EDIT:
Most probably this is coming from the jsx of the library you are using ( material-ui ) Check if you are using the latest version or if you are, they should probably address it soon

This is an issue with material-ui that they've already fixed. Wait for their 0.15.2 release or get their master branch now.

Property 'loadIntoLocation' does not exist on type 'DynamicComponentLoader'

I'm trying to get loadIntoLocation working, but I keep get the error message,
Property 'loadIntoLocation' does not exist on type 'DynamicComponentLoader'.
I've looked at other examples and used plunker and it works there, but I can't seem to get it working locally. I grep'd the Angular2 core and could not find any mention of a loadIntoLocation function.
How do I find out what version of angular2 I'm using? Can I upgrade? I just used npm install to deploy my environment.

That was removed a while ago as far as I remember. DynamicComponentLoader is deprecated anyway. Use ViewContainerRef.createComponent() instead.
For a full example see Angular 2 dynamic tabs with user-click chosen components