ESLint plugin that detects incorrect use of DOM globals in order to properly do SSR
npm install eslint-plugin-ssr-friendlyESLint plugin that detects incorrect use of DOM globals in order to properly do SSR and in general share code between client-side JS and Node.js modules.
``bash`
npm i --save-dev eslint-plugin-ssr-friendly
Then add these to your eslintrc configuration:
`json`
{
"plugins": ["ssr-friendly"],
"extends": ["plugin:ssr-friendly/recommended"]
}
Disallow use of DOM globals in module and global scope,
as this will break any import/require in a NodeJS environment.
To fix it, wrap it in a function that will call when on client-side.
_Please note that we can't detect if you're still calling this function without
properly checking upfront if typeof window !== "undefined"._
`js`
const retina = devicePixelRatio > 2;
`js`
const isRetina = () => devicePixelRatio >= 2;
Disallow use of DOM globals in class constructors,
as this will break SSR if you're instantiating this class as singleton or you're rendering this component.
To fix it, move this statement in a initOnBrowser() like-method or componentDidMount() if you're using React.
_Please note that we can't detect if you're still calling this function in your constructor without
properly checking upfront if typeof window !== "undefined"._
`js`
class myClass {
constructor() {
document.title = "Otto";
}
}
`js`
class myClass {
componentDidMount() {
document.title = "Otto";
}
}
Disallow use of DOM globals in render() method of a React class-component,
as this will break SSR if you're rendering this component.
To fix it, move this statement to componentDidMount()
_Please note that we can't detect if you're still calling this function in your constructor without
properly checking upfront if typeof window !== "undefined"._
`js`
class Header extends React.Component {
render() {
const width = window.innerWidth;
return ;
}
}
`js`
class Header extends React.Component {
componentDidMount() {
this.setState({ width: window.innerWidth });
}
render() {
return ;
}
}
Disallow use of DOM globals in the render-cycle of a React FC,
as this will break SSR if you're rendering this component.
To fix it, move this statement into a useEffect())
`js`
const Header = () => {
window.addEventListener("resize", () => {});
return ;
};
`js``
const Header = () => {
useEffect(() => {
window.addEventListener("resize", () => {});
}, []);
return ;
};