score:1
if you are using react-hooks, you can create your custom usedocument hook:
import react, { useeffect, usestate } from 'react'
export const usedocument = () => {
const [mydocument, setmydocument] = usestate(null)
useeffect(() => {
setmydocument(document)
}, [])
return mydocument
}
in your component:
...
const doc = usedocument()
...
<somecomponent
ref={doc && doc.body}
...
/>
...
score:3
this issue usually happens because when react is rendered on the server. it does not have a document or window object on the server side and those objects are only available on the browser.
try to call the document functions in or after componentdidmount
.
componentdidmount(){
this.setstate({documentloaded:true});
}
somefunction(){
const { documentloaded } = this.state;
if(documentloaded){
// logic using document object
}
}
Source: stackoverflow.com
Related Query
- React SSR ReferenceError: document is not defined
- React SSR: Document is not defined
- ReferenceError: document is not defined in Next.js while working with React Aria overlays
- How to fix self is not defined when firebase messaging method called in react ssr app?
- React ReferenceError: document is not defined
- react hook for setting the document title does not work on ssr
- React Stripe Elements & SSR - Webpack Error: Window is Not Defined
- window is not defined in React with SSR
- Uncaught ReferenceError: React is not defined
- Window is not defined in Next.js React app
- React Uncaught ReferenceError: process is not defined
- window not defined error when using extract-text-webpack-plugin React
- Jquery in React is not defined
- Using jest in my react app, describe is not defined
- error 'document' is not defined : eslint / React
- React JS Error: is not defined react/jsx-no-undef
- Next.js: document is not defined
- google is not defined in react app using create-react-app
- Reactjs: document is not defined
- Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
- 'useState' is not defined no-undef React
- Uncaught ReferenceError: React is not defined
- React Native - __DEV__ is not defined
- Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ReferenceError: document is not defined
- Uncaught ReferenceError: regeneratorRuntime is not defined in React
- React Props is Not Defined
- gapi is not defined when loading React Component
- ReferenceError: React is not defined in jest tests
- React JS Uncaught Reference Error: function not defined
- react function is not defined no-undef
More Query from same tag
- Higher Order React Component for Click Tracking
- how to change object value in react hooks?
- ComponentDidUpdate Inside HOC is not being logged when input value Changes in Container
- How to fix a conditional problem in react
- Get audio from a Flask server and showing audio in a playable format on React
- Using TypeScript To Create A React Stateless Functional Component That Accepts Array
- Cloudinary React not adding width and height attributes to img tag
- Adding / removing objects in an array based on button click with Redux
- How do I display an array where each object in array is a new <td> in ReactJS
- React-Redux: Combining reducers fails
- How can i check if user is authenticated more efficently in react?
- OpenLayers3 no refresh WMS in zoom-in
- Issue Displaying Data from useState in return() method
- Simply extract analytical data from Spotify API
- Avoiding re-render unchanged items
- React testing error. Target container is not a DOM element
- Reactjs checkboxes not working in the update state of the component
- How to make props safe in jsx like jinja2
- React: Transitions are cut after element re-render further in the elements array
- How to display the fetched json from redux in my react component?
- redux dispatch action and reducer with new state
- Deploy Nodejs+Express+React+Webpack app on heroku
- React.Component 'this' changed in ComponentDidMount
- React Hooks - Return useContext without breaking the Rule of Hooks
- How to customise gray colours in material UI
- Redux Form, Radio Button Fields, how to support variable values?
- react-select creatable defaultInputValue not working
- React, Webpack and Babel for Internet Explorer 9
- HTMLElement definition in typescript.lib/lib.dom.d.ts was overridden by @types/react/global.d.ts
- React JS - Login system with Remember LocalStorage