# eslint-plugin-ssr-friendly

> ESLint plugin that detects incorrect use of DOM globals in order to properly do SSR

Latest version **1.3.0** (published 2023-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install eslint-plugin-ssr-friendly
pnpm add eslint-plugin-ssr-friendly
yarn add eslint-plugin-ssr-friendly
bun add eslint-plugin-ssr-friendly
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2023-11-14 |
| First published | 2020-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 56 |
| Author | Flavio De Stefano |
| Maintainers | kopiro |
| Keywords | eslint, eslintplugin, ssr, server-side-rendering, globals, react, nodejs |

## Links

- npm: https://www.npmjs.com/package/eslint-plugin-ssr-friendly
- Repository: https://github.com/kopiro/eslint-plugin-ssr-friendly
- Issues: https://github.com/kopiro/eslint-plugin-ssr-friendly/issues
- npm.io page: https://npm.io/package/eslint-plugin-ssr-friendly

## Dependencies (1)

- [globals](https://npm.io/package/globals.md) ^13.8.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2023-11-14
- 1.2.0 — 2022-11-30
- 1.0.6 — 2022-02-04
- 1.0.5 — 2020-12-15
- 1.1.0 — 2020-10-08
- 1.0.4 — 2020-10-07
- 1.0.3 — 2020-10-05
- 1.0.2 — 2020-10-05
- 1.0.1 — 2020-10-05
- 1.0.0 — 2020-10-05

## README

# eslint-plugin-ssr-friendly

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

[![npm version](https://badge.fury.io/js/eslint-plugin-ssr-friendly.svg)](https://badge.fury.io/js/eslint-plugin-ssr-friendly)

## Installation

```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"]
}
```

## 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

```js
const retina = devicePixelRatio > 2;
```

### Allowed

```js
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

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

### Allowed

```js
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

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

### Allowed

```js
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

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

### Allowed

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

---
_Source: https://npm.io/package/eslint-plugin-ssr-friendly · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._