Integration with NextJS about use-metamask

[damianlluch]

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

TypeError: dispatch is not a function

I reproduced only the example from de main page.

Any suggestions?

thanks!

[mdtanrikulu]

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

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]

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

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]

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]

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

[damianlluch]

I have the issue.

[mdtanrikulu]

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]

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

[mdtanrikulu]

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]

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

[mdtanrikulu]

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