My form works, and stores to the database, but I get this server error when trying to use both the Smple MDE with the React Forms Hook Controller, but not when I use either one alone.
The error:
node_modules/codemirror/lib/codemirror.js (88:2) @ eval
⨯ ReferenceError: document is not defined
at __webpack_require__ (/Users/suzanne2022/Developer/React/tricoach24/.next/server/webpack-runtime.js:33:43)
at __webpack_require__ (/Users/suzanne2022/Developer/React/tricoach24/.next/server/webpack-runtime.js:33:43)
at __webpack_require__ (/Users/suzanne2022/Developer/React/tricoach24/.next/server/webpack-runtime.js:33:43)
at eval (./app/tests/new/page.tsx:11:80)
at (ssr)/./app/tests/new/page.tsx (/Users/suzanne2022/Developer/React/tricoach24/.next/server/app/tests/new/page.js:294:1)
at __webpack_require__ (/Users/suzanne2022/Developer/React/tricoach24/.next/server/webpack-runtime.js:33:43)
at JSON.parse (<anonymous>)
null
My Package.JSON file (I like to install ‘latest’ for everything and try to troubleshoot, as once i’m done with a tutorial I’d have to figure out how to update anyway)
{
"name": "tricoach24",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@next-auth/prisma-adapter": "^1.0.7",
"@prisma/client": "^5.7.1",
"@radix-ui/themes": "^2.0.3",
"@vercel/postgres": "^0.5.1",
"axios": "^1.6.5",
"classnames": "^2.3.2",
"daisyui": "^4.5.0",
"easymde": "^2.18.0",
"next": "14.0.4",
"next-auth": "^4.24.5",
"nodemailer": "^6.9.8",
"react": "^18",
"react-dom": "^18",
"react-hook-form": "^7.49.2",
"react-simplemde-editor": "^5.2.0",
"zod": "^3.22.4"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.0.4",
"postcss": "^8",
"prisma": "^5.7.1",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}
My /new page: (I’m doing tests, but it’s the issues page code)
'use client'
import {useCallback, useState} from 'react'
import {TextFieldRoot, TextFieldInput, Button} from "@radix-ui/themes";
// import {SimpleMdeReact} from "react-simplemde-editor";
import SimpleMDE from "react-simplemde-editor"
import "easymde/dist/easymde.min.css";
import {Controller, useForm} from "react-hook-form";
import axios from "axios";
import {useRouter} from "next/navigation";
interface TestForm {
activity: string,
comment: string
}
const NewTestPage = () => {
const router = useRouter()
const {register, control, handleSubmit} = useForm<TestForm>()
const [value, setValue] = useState("");
const onChange = useCallback((value: string) => {
setValue(value);
}, []);
return (
<form className="max-w-xl space-y-3"
onSubmit={handleSubmit(async (data) => {
try {
await axios.post('/api/tests', data)
router.push('/tests')
} catch (error) {
console.log(error)
}
}
)}
>
<h2>New Fitness Test</h2>
<TextFieldRoot>
<TextFieldInput placeholder='Activity' {...register('activity')}/>
</TextFieldRoot>
{document &&
<Controller
name="comment"
control={control}
render={({field}) =>
(
<SimpleMDE placeholder='Comments' {...field}/>
)
}
/>
}
<Button>Submit New Test</Button>
</form>
)
}
export default NewTestPage
I havn’t been able to track down if there is an in compatibility between react hook forms and react simple MDE…in fact very few results when I search for that specifically. Appreciate any suggestions.
I’ve tried doing a check for document before displaying the Controller compopnent but that doesn’t seem to help.