title: Refrence Error self is not defined in next js
body: <pre><code>import React,{useState} from 'react'
  import { MainConatainer,FullButton } from &quot;../../components&quot;;
  import { Box50,FlexBox} from '../../styles/containers'
  import { CKEditor } from '@ckeditor/ckeditor5-react';
  import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
  import { Formik,Form,Field,ErrorMessage } from 'formik';
  import { InputField } from '../../components/forms/formui/InputField';
  import {  State, City }  from 'country-state-city';
  import Data from './component/Data';
  
  
  const AddNewCase = () =&gt; {
      const [editorData, setEditorData] = useState('');
      const [cityList, setCityList] = useState();
      const [stateList, setStateList] = useState();
      const handleCountryChange = (e) =&gt; {
          const res = State.getStatesOfCountry(e);
          setStateList(res);
        }
      const handleStateChange = (e) =&gt; {
          let temp = e.split('+');
          console.log(temp)
          const res = City.getCitiesOfState(temp[1], temp[0]);
          
          setCityList(res);
        }
      
    return (
      &lt;MainConatainer&gt;
          &lt;FlexBox&gt;
              &lt;Box50&gt;
                  &lt;Formik
                          initialValues={{
                          title:&quot;&quot;,
                          category:&quot;&quot;,
                          ShortDescription:&quot;&quot;,
                          body:editorData,
                          RefrenceDescription:&quot;&quot;,
                          IncidentDate:&quot;&quot;,
                          State:&quot;&quot;,
                          City:&quot;&quot;,
                          Country:&quot;&quot;,
                          RefrenceDescription:&quot;&quot;,
  
                          }}
  
                          onSubmit={(values)=&gt;{
                          console.log(values);
                          }}
                  &gt;
                      &lt;Form&gt;
                          &lt;InputField label=&quot;Title&quot; type=&quot;text&quot; name=&quot;title&quot;/&gt;
                          &lt;Field as=&quot;select&quot; name=&quot;category&quot; className=&quot;form-control&quot;&gt;
                              &lt;option value=&quot;Halala&quot;&gt;Halala&lt;/option&gt;
                              &lt;option value=&quot;Mutah&quot;&gt;Mutah&lt;/option&gt;
                              &lt;option value=&quot;SunnatMarriage&quot;&gt;Sunnat Marriage&lt;/option&gt;
                              &lt;option value=&quot;Love_Jihad&quot;&gt;Love Jihah&lt;/option&gt;
                              &lt;option value=&quot;HonorKillings&quot;&gt;Honor Killings&lt;/option&gt;
                              &lt;option value=&quot;HateKillings&quot;&gt;Hate Killings&lt;/option&gt;
                              &lt;option value=&quot;Other&quot;&gt;Other&lt;/option&gt;
                          &lt;/Field&gt;
                          &lt;InputField label=&quot;Short Description&quot; type=&quot;text&quot; name=&quot;ShortDescription&quot;/&gt;
                          &lt;InputField label=&quot;Incident Date&quot; type=&quot;date&quot; name=&quot;IncidentDate&quot;/&gt;
                          &lt;InputField label=&quot;Refrence Links&quot; type=&quot;textarea&quot; name=&quot;RefrenceDescription&quot; placeholder=&quot;News Article Wikipedia youtube video Link&quot;/&gt;
                          &lt;Field as=&quot;select&quot; name=&quot;Country&quot; className=&quot;form-control my-2&quot; onChange={(e)=&gt;{handleCountryChange(e.target.value)}}&gt;
                              &lt;option selected&gt;Country&lt;/option&gt;
                              &lt;option value=&quot;IN&quot;&gt;India&lt;/option&gt;
                              &lt;option value=&quot;PK&quot;&gt;Pakistan&lt;/option&gt;
                              &lt;option value=&quot;BD&quot;&gt;Bangladesh&lt;/option&gt;
                              &lt;option value=&quot;AF&quot;&gt;Afganistan&lt;/option&gt;
                              &lt;option value=&quot;GB&quot;&gt;UK&lt;/option&gt;
                              &lt;option value=&quot;FR&quot;&gt;France&lt;/option&gt;
                              &lt;option value=&quot;NP&quot;&gt;Nepal&lt;/option&gt;
                              &lt;option value=&quot;BH&quot;&gt;Bhutan&lt;/option&gt;
                          &lt;/Field&gt;
                          {stateList &amp;&amp; &lt;Field as=&quot;select&quot; name=&quot;State&quot; className=&quot;form-control my-2&quot; onChange={(e)=&gt;{handleStateChange(e.target.value)}}&gt;
                              {stateList.map((item,index)=&gt;(
                                  &lt;option key={index} value={`${item.isoCode}+${item.countryCode}`}&gt;{item.name}&lt;/option&gt;
                              ))}
                          &lt;/Field&gt;}
                          {cityList &amp;&amp; &lt;Field as=&quot;select&quot; name=&quot;City&quot; className=&quot;form-control my-2&quot;&gt;
                              {cityList.map((item,index)=&gt;(
                                  &lt;option key={index} value={item.name}&gt;{item.name}&lt;/option&gt;
                              ))}
                          &lt;/Field&gt;}
                          &lt;CKEditor editor={ ClassicEditor } onChange={ (  event,editor ) =&gt; {const data = editor.getData();setEditorData(data);}}  
                          name=&quot;body&quot;/&gt;
  
                      &lt;FullButton type='submit'&gt;Submit&lt;/FullButton&gt;
                      &lt;/Form&gt;
  
  
                  &lt;/Formik&gt;
              &lt;/Box50&gt;
              &lt;Data/&gt;
          &lt;/FlexBox&gt;
      &lt;/MainConatainer&gt;
    )
  }
  
  export default AddNewCase
  </code></pre>
  <p>If i am going on this page by clicking mouse link the page open fines but if we are going on this page by clicking on link but if i just refresh the page then this error comes i dont know i even not care because always the user going on my page by clicking here but when i go to deploy then this error wil come to me <a href="https://i.stack.imgur.com/nWOTO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nWOTO.png" alt="enter image description here" /></a></p>