ReferenceError: document is not defined (in plain JavaScript)
javascript
Solution
This happened with me because I was using `Next JS` which has server side rendering. When you are using server side rendering there is no browser. Hence, there will not be any variable `window` or `document`. Hence this error shows up.
Work around :
If you are using Next JS you can use the dynamic rendering to prevent server side rendering for the component.
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(() => import('../components/List'), {
ssr: false
})
export default () => <DynamicComponentWithNoSSR />
If you are using any other server side rendering library. Then add the code that you want to run at the client side in `componentDidMount`. If you are using React Hooks then use `useEffects` in the place of `componentsDidMount`.
import React, {useState, useEffects} from 'react';
const DynamicComponentWithNoSSR = <>Some JSX</>
export default function App(){
[a,setA] = useState();
useEffect(() => {
setA(<DynamicComponentWithNoSSR/>)
});
return (<>{a}<>)
}
References :
- https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
- https://reactjs.org/docs/hooks-effect.html
Problem
I get the a "ReferenceError: document is not defined" while trying to ``` var body = document.getElementsByTagName("body")[0]; ``` I have seen this before in others code and didn't cause any trouble. Why is it now? The companied HTML page is just a div inside the body. ``` <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/quiz.css" /> <script type="text/javascript" src="js/quiz.js"></script> </head> <body> <div id="divid">Next</div> </body> </html> ``` the code is the following: ``` (function(){ var body = document.getElementsByTagName("body")[0]; function Question(question, choices, correctAns) { this.question = question; this.choices = choices; this.correctAns = correctAns; } Question.prototype.checkAns = function(givenAns){ if (this.correctAns === givenAns) { console.log("OK"); } }; function Quiz() { this.questions = []; } Quiz.prototype.showAllQuestions = function(){ this.questions.forEach(function(questions){ console.log(questions.question); }); }; Quiz.prototype.showQuiz = function(){ this.questions.forEach(function(questions){ for (var i=0; i < questions.choices.length; i+=1) { body.innerHTML( "<input type=\"radio\" name=\"sex\" value=\"male\">" + questions.choices[i] + "<br>"); } }); }; var q1 = new Question("What is red?", ["Color","Animal","Building"],1); var q2 = new Question("Most popular music?", ["Latin","Pop","Rock"],2); var quiz = new Quiz(); quiz.questions.push(q1); quiz.questions.push(q2); quiz.showAllQuestions(); })(); ``` Try the whole code in this link HERE