react-hook-form v7

[Pitchnogle]

I am at the part in the series where I am attempting to edit a post. I have run into an issue where clicking the 'Edit Post` button is causing a crash.

I see the error

Unhandled Runtime Error
TypeError: path.split is not a function
Call Stack
get
node_modules/react-hook-form/dist/index.esm.mjs (33:0)
register
node_modules/react-hook-form/dist/index.esm.mjs (1900:0)
commitAttachRef
node_modules/react-dom/cjs/react-dom.development.js (23645:0)
commitLayoutEffectOnFiber
node_modules/react-dom/cjs/react-dom.development.js (23503:0)
commitLayoutMountEffects_complete
node_modules/react-dom/cjs/react-dom.development.js (24688:0)
commitLayoutEffects_begin
node_modules/react-dom/cjs/react-dom.development.js (24674:0)
commitLayoutEffects
node_modules/react-dom/cjs/react-dom.development.js (24612:0)
commitRootImpl
node_modules/react-dom/cjs/react-dom.development.js (26823:0)
commitRoot
node_modules/react-dom/cjs/react-dom.development.js (26682:0)
finishConcurrentRender
node_modules/react-dom/cjs/react-dom.development.js (25981:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25809:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

This seems to related to version 7 of react-hook-form?

I have changed the <input> in the PostForm from

<input
  className={styles.checkbox}
  name="published"
  type="checkbox"
  ref={register}
/>

to

<input
  className={styles.checkbox}
  name="published"
  type="checkbox"
  {...register("published", { required: true })}
/>

This still gives the same error though afterward. My dependencies are:

"dependencies": {
  "firebase": "^9.9.4",
  "lodash.debounce": "^4.0.8",
  "lodash.kebabcase": "^4.1.1",
  "next": "^12.3.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-firebase-hooks": "^5.0.3",
  "react-hook-form": "^7.35.0",
  "react-hot-toast": "^2.3.0",
  "react-markdown": "^8.0.3"
}

[Pitchnogle]

I was able to solve this. Turns out I missed the ref= in the tag.</p> <p>So I had to also change the lines</p> <pre><code><textarea name="content" ref={register} ></textarea></code></pre> <p>to</p> <pre><code><textarea name="content" {...register("content", { required: true })} ></textarea></code></pre> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>