eslint-plugin-ssr-friendly

eslint-plugin-ssr-friendly

ESLint plugin that detects incorrect use of DOM globals properties in your code in order to properly do Server-Side-Rendering.

Installation

npm i --dev eslint-plugin-ssr-friendly

Then add these to your eslintrc configuration:

{
  "plugins": ["ssr-friendly"],
  "extends": ["plugin:ssr-friendly/recommended"]
}

Rules

no-dom-globals-in-module-scope

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".

Not allowed

const retina = devicePixelRatio > 2;

Allowed

const isRetina = () => devicePixelRatio >= 2;

no-dom-globals-in-constructor

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".

Not allowed

class myClass {
  constructor() {
    document.title = "Otto";
  }
}

Allowed

class myClass {
  componentDidMount() {
    document.title = "Otto";
  }
}

no-dom-globals-in-react-cc-render

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".

Not allowed

class Header extends React.Component {
  render() {
    const width = window.innerWidth;
    return <div style={{ width }} />;
  }
}

Allowed

class Header extends React.Component {
  componentDidMount() {
    this.setState({ width: window.innerWidth });
  }
  render() {
    return <div style={{ width }} />;
  }
}

no-dom-globals-in-react-fc

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())

Not allowed

const Header = () => {
  window.addEventListener("resize", () => {});
  return <div />;
};

Allowed

const Header = () => {
  useEffect(() => {
    window.addEventListener("resize", () => {});
  }, []);
  return <div />;
};