CODEWITHSUNDEEP
reactjswebpacknext.jsreact-hook-form
Renato Willyan
Renato Willyan

Reputation: 446

How to add react-hook-form as an external library in webpack?

I'm making a form in which I need to integrate react-dropzone with react-hook-form, for that, I based myself in this discussion on Github: https://github.com/react-hook-form/react-hook-form/discussions/2146. However, when destructuring the useFormContext, as follows:

const { control } = useFormContext();

I get the following error:

TypeError: Cannot destructure property 'control' of 
'(0 , react_hook_form__WEBPACK_IMPORTED_MODULE_2__.useFormContext)(...)' as it is null.

I did some research and found this question: react-hook-form empty context, where the developer had a problem very similar to mine. The found solution was

basically what i need it is just adding react-hook-form as external library in webpack config and now, csb is working :)

I know little about the webpack, especially inside Nextjs. But after researching and reading the documentation, this was my try:

/next.config.js

module.exports = {
  webpack: (config, options) => {
    config.externals.push({
      'react-hook-form': 'react-hook-form',
    });

    return config;
  },
  ...
}

But the error remains the same. Do you know how I can fix this problem?

Upvotes: 5

Views: 11839

Answers (1)

Renato Willyan
Renato Willyan

Reputation: 446

Thanks to @juliomalves' comment, I solved the problem. The problem was that I forgot to wrap my form with the FormProvider component. The error was given because there was no context to provide control to my useFormContext, so there was no way to unstruct it.

Upvotes: 14

Related Questions