mdtanrikulu/use-metamask

Integration with NextJS

damianlluch opened this issue · 11 comments

damianlluch commented

Hello, this project seems to be very good, do you know how I could integrate this library in a project with Next?

Thanks

damianlluch commented

I tried with this library in an project with Next.
And I get this error:

TypeError: dispatch is not a function

image

I reproduced only the example from de main page.

Any suggestions?

thanks!

mdtanrikulu commented

Heya! Thanks for the issue. I tried to reproduce the error with nextjs create app template but failed.

image



Could you give me more details? If you press useMetamask.js?cdc:138 url in second line of the error you got, this may route you to code block causing the issue.

damianlluch commented

Heya! Thanks for the issue. I tried to reproduce the error with nextjs create app template but failed.

image

Could you give me more details? If you press useMetamask.js?cdc:138 url in second line of the error you got, this may route you to code block causing the issue.

perfect!, you can share this example?

mdtanrikulu commented

sure, here you go. but please let me know the cause of the code line by following the instruction from my previous message. so I can see what I can improve.

nextjsapp.zip

damianlluch commented

Perfect, now I'll look at the code you sent, and I'll let you know.

damianlluch commented

I have the issue.

image

image

mdtanrikulu commented

Oh, I guess I know the issue now. Did you wrap your root component with <MetamaskStateProvider> ?
As shown here in first step.

Your root component must look like this;

import React                     from 'react';
import ReactDOM                  from 'react-dom';
import { MetamaskStateProvider } from "use-metamask";
import App                       from './App';

ReactDOM.render(
    <MetamaskStateProvider>
      <App />
    </MetamaskStateProvider>
  document.getElementById('root')
);

You can also see _app.js file that I shared as nextjs example with you.

damianlluch commented

Hi, yes I have wrapped it over pages/_app.js

mdtanrikulu commented

Hi, yes I have wrapped it over pages/_app.js

That's interesting. Is there any chance I can see your implementation if it's open source?

The only way I was able to reproduce your issue, when I don't use MetamaskStateProvider wrapper, thus;

  const dispatch = useContext(MetaDispatchContext);

in my hook implementation returns undefined. The component you call useMetamask hook must be child or descendant of this wrapped root component. Other than that I could not find any other case this can happen.

mdtanrikulu commented

Hey @damianlluch! Is it still a problem on your side? Is there anything I can help there?

mdtanrikulu commented

Closing this issue due to inactivity, feel free to open if anything related this topic arise.