I have a question regarding the use of a plugin that I created, and used in an application called HRnet (React 18).

I have no warning in devlopment on the plugin side. But in development on the application side I always have this warning from the bundle.js (but not in production) :

Picture of the warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

It's related to my plugin (no more warning when I comment my plugin), but I don't understand why.

My plugin is a dropdown, it is published on NPM, for the bundler I used Rollup, and lifting state up to pass the value.

NPM

plugin: https://www.npmjs.com/package/react-dropdown-component-library

GIT

Dropdown (plugin) : https://github.com/Lob2018/Lobjois_Yann_14_code_plugin_jQuery_072022

HRNet (app): https://github.com/Lob2018/Lobjois_Yann_14_HRNet_072022

Best regards,

CodePudding user response：

This is probably because register from react-hook-form returns a ref, and it is required by that library that the component it is attached to connects it to the actual form node.

However your dropdown is custom and doesnt use a base HTML element so you need to instead just not attach it. See https://react-hook-form.com/faqs/#Whatifyoudonthaveaccesstoref