No modal id found in NiceModal.useModal

[dungle-scrubs]

Hi, I'm attempting to use this for the first time, in a Nextjs project, and am running into the error (server-side):

Error: No modal id found in NiceModal.useModal

When following the docs:

import { Modal } from 'antd';
import NiceModal, { useModal } from '@ebay/nice-modal-react';

export default NiceModal.create(({ name }) => {
  // Use a hook to manage the modal state
  const modal = useModal();
  return (
    <Modal
      title="Hello Antd"
      onOk={() => modal.hide()}
      visible={modal.visible}
      onCancel={() => modal.hide()}
      afterClose={() => modal.remove()}
    >
      Hello {name}!
    </Modal>
  );
});

The main difference being that instead of using antd, I'm using a modal called Dialog from Radix UI

I'll set up an example for you but in the meantime, am I doing something wrong that should be obvious?

Thanks

[supnate]

Hi @dungle-scrubs , did you wrap your app with NiceModal.Provider? https://github.com/ebay/nice-modal-react#embed-your-application-with-nicemodalprovider

[dungle-scrubs]

Yes, then realized shortly after that it's because you can't wrap your app with this Provider in Nextjs' _app.js and must do it in each page instead.

Do you know if there's a solution to that?

[dungle-scrubs]

The solution I'm using on my end is to wrap the contents of <Layout> with the Provider. I have multiple Layouts in my Nextjs project, so I use a common component that wraps both of them.

[kevinswarner]

Why is it not possible to use this provider in the normal way other providers are used in a NextJS app? Thanks for any explanation.

[supnate]

@kevinswarner it is the normal way like other providers.

[kevinswarner]

@supnate Sorry. I should have asked my question more clearly. I simply meant that I am using several other Provider libraries that work fine by placing them in the _app.js file in NextJS. I was just wondering why this one seems not to work when following that pattern. I like your library by the way. It is very helpful. I am just curious about the reasons it will not work in the _app.js file. Thank you.

[supnate]

To be honest, I'm not familiar with NextJS. It seems should be ok in _app.js after google about it since it's just a normal provider component like others. @dungle-scrubs do you have any idea why nice modal provider can't be used in _app.js?

[supnate]

After some search, I found it seems could be used like this: https://github.com/agnosticoder/fitness-app-next-frontend/blob/0b2e502e710287c840252ded7b32e0121c701e7e/pages/_app.tsx

[kevinswarner]

Thanks. I will look at the example.