pbzona
commented
1 year ago I ran into this too - the thing about client components in Next is they render a preview on the server when doing a full page load.
I'm pretty sure the error is coming from that attempt to pre-render, although I'm not sure why, since Next typically handles browser APIs in a way that avoids this. Anyway, you can disable this behavior by using a dynamic import with the SSR option disabled. Instead of importing SimpleMDE normally, you would do this:
import dynamic from "next/dynamic";
...
const SimpleMDE = dynamic(() => import("react-simplemde-editor"), { ssr: false });Would still be interested to hear from @mosh-hamedani - I'm less interested in why this code doesn't work than why his code in the video does. 😅
krushanu
The page is redirected on form submission without going to the catch block. But, in the backend, I am getting the following error: the API body is not being executed.
For me, the Error does not go on server restart.
`"use client"; import { Button, TextField } from "@radix-ui/themes"; import SimpleMDE from "react-simplemde-editor"; import "easymde/dist/easymde.min.css"; import { useForm, Controller } from "react-hook-form"; import axios from "axios"; import { useRouter } from "next/navigation";
interface IssueInterface { title: string; description: string; }
const NewIssue = () => { const router = useRouter(); const { register, control, handleSubmit } = useForm();
return (
<form
className=" max-w-xl space-y-3"
onSubmit={handleSubmit(async (data) => {
try {
await axios.post("/issues/new", data);
router.push("/issues");
} catch (error) {
console.log(error);
}
})}
export default NewIssue;`