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

[imranDev20]

I am using Next.js 13.4.19 (Page Router).

const { control } = useFormContext<ProductComboFormInput>() ?? {};

const { fields, append, remove } = useFieldArray({
  control,
  name: "products",
});

My form is working fine. But failing in build. I tried without destructuring control and using methods?.control or methods && methods.control . Still not working. I already checked, the FormProvider is there with methods. There is no apparent reason that it shouldn't work.

My webpack config in next.config.js

 webpack(config) {
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.(".svg")
    );

    config.module.rules.push(
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/,
      },

      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        resourceQuery: { not: /url/ },
        use: ["@svgr/webpack"],
      }
    );
    config.externals.push({
      "react-hook-form": "react-hook-form",
    });

    fileLoaderRule.exclude = /\.svg$/i;

    return config;
  },

This is the log during the build:

    at useFieldArray (file:///Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-hook-form/dist/index.esm.mjs:1088:31)
    at ProductFields (/Users/imrankabir/Desktop/projects/kiraj-agro/.next/server/chunks/1468.js:436:102)
    at Wc (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
    at $c (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at Zc (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)

Error occurred prerendering page "/products/product-combos/add-new-combo/components/product-fields". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'control')
    at useFieldArray (file:///Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-hook-form/dist/index.esm.mjs:1088:31)
    at ProductFields (/Users/imrankabir/Desktop/projects/kiraj-agro/.next/server/chunks/1468.js:436:102)
    at Wc (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
    at $c (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at Zc (/Users/imrankabir/Desktop/projects/kiraj-agro/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)

I am hardstuck on this issue. Any help is appreciated. If my problem is not clear in any way kindly let me know.

[Moshyfawn]

Is your form component a client component? React Context is not available on the server.

[imranDev20]

Thanks. You helped me notice that I wasn't using useFieldArray on a client component. It's working now.