Any examples of a plugin integrating a new React component into the UI?

[paulpopus]

Hey all,

I've been trying to get this Meilisearch integration: https://github.com/NouanceLabs/payload-meilisearch/tree/feature/admin-panel into a usable state and one of the things needed is a UI panel where you can manage your indexes (eg. to resync them all if needed).

However I've been struggling to get the plugin config to work nicely with admin UI components. The nav Link and the ManageMeilisearch components work fine if I write them directly in the demo folder however I keep getting React related errors when importing from the plugin config (as in the codebase above).

The only way I've managed to get components working via the plugin has been to not import any external components or hooks into my own, so no Button component or useConfig hooks from payload.

Would appreciate any help on this, many thanks ahead!

[DanRibbens]

I'm excited to check out your plugin!

Since you import react and so does Payload you end up getting react errors when React is imported under different versions. You can add peerDependencies to avoid this.

See how it is done here as an example: https://github.com/payloadcms/plugin-seo/blob/6bd04dfed2101663b20ff747e2e02a0cca362781/package.json#L26

Does that help?

[SalahAdDin]

Plugin unmaintained.

[paulpopus]

That's because it's been moved into this monorepo https://github.com/payloadcms/payload/tree/main/packages/plugin-seo

[paulpopus]

@DanRibbens Thanks for the example, I added React as a peer dependency as well now, but I'm still getting errors when using any hook provided by Payload or a Payload component like Button as if my components mount before Payload?

[finkinfridom]

I have the same issue.
I just created a new plugin, that works as expected in the real environment.
Unfortunately, when trying to debug on my local machine, I receive Cannot read properties of undefined (reading 'api')
I'm using the useConfig() hook for instance and the components receive an empty object.
any clue?

**EDIT: **
@paulpopus I spotted the difference that makes the seo plugin working (and now also my plugin works as expected):

alias: {
  ...config.resolve.alias,
  react: path.join(__dirname, "../node_modules/react"),
  "react-dom": path.join(__dirname, "../node_modules/react-dom"),
  "payload": path.join(__dirname, "../node_modules/payload"),
},

the fundamental part for me is the payload alias definition