Registry / testing / eslint-plugin-ssr-friendly

eslint-plugin-ssr-friendly

library1.3.0jsnpmunverified

ESLint plugin that detects incorrect use of DOM globals (e.g., window, document, navigator) in module scope, constructors, React component render methods, and function components, ensuring code is safe for server-side rendering (SSR) and Node.js environments. Stable version 1.3.0 as of August 2023. It focuses on preventing runtime errors during SSR by catching patterns that assume a browser environment. Unlike general linting rules, it provides specific rules for React class components, function components, and class constructors. Released under MIT license with monthly releases.

testing web-framework

npm install eslint-plugin-ssr-friendly

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-SSR-

eslint-plugin-ssr-friendly

testingjavascriptv1.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin

✓ import eslintPluginSsrFriendly from 'eslint-plugin-ssr-friendly';

✗ const eslintPluginSsrFriendly = require('eslint-plugin-ssr-friendly');

ESM default import; CommonJS also works as the package provides both.

rules

✓ import { rules } from 'eslint-plugin-ssr-friendly';

✗ const rules = require('eslint-plugin-ssr-friendly').rules;

Named export for accessing rule definitions directly.

configs

✓ import { configs } from 'eslint-plugin-ssr-friendly';

✗ const configs = require('eslint-plugin-ssr-friendly').configs;

Named export for accessing preset configs (e.g., 'recommended').

Quick setup using recommended config; shows how to enable all rules and example violations.

// Install the plugin // npm install --save-dev eslint-plugin-ssr-friendly // In .eslintrc.js module.exports = { plugins: ['ssr-friendly'], extends: ['plugin:ssr-friendly/recommended'], rules: { 'ssr-friendly/no-dom-globals-in-module-scope': 'error', 'ssr-friendly/no-dom-globals-in-constructor': 'error', 'ssr-friendly/no-dom-globals-in-react-cc-render': 'error', 'ssr-friendly/no-dom-globals-in-react-fc': 'error', }, }; // Example code that will trigger errors: // const width = window.innerWidth; // module scope error // class MyComp extends React.Component { // render() { return <div>{window.innerWidth}</div>; } // render error // }

Debug

Known issues

gotchaThe plugin only detects direct use of DOM globals in certain scopes; it does not catch indirect access via helper functions or properties.

fix

Manually review code that accesses DOM globals through functions or variables.

affects: >=1.0.0

gotchaRules cannot verify that DOM globals used inside functions are guarded by a typeof check. For example, 'const isRetina = () => devicePixelRatio >= 2' is allowed even if called unconditionally.

fix

Ensure all uses of DOM globals in functions are guarded with 'if (typeof window !== "undefined")'.

affects: >=1.0.0

deprecatedThe 'recommended' config may change between minor versions; pin your eslint-plugin-ssr-friendly version to avoid unexpected rule changes.

fix

Specify exact version in package.json (e.g., "eslint-plugin-ssr-friendly": "1.3.0") and review changelog before upgrading.

affects: >=1.0.0

Errors

Common errors & fixes

Definition for rule 'ssr-friendly/no-dom-globals-in-module-scope' was not found.

The plugin is not installed or not listed in the 'plugins' array.

fix

Ensure 'eslint-plugin-ssr-friendly' is installed and added to plugins: ['ssr-friendly'].

ESLint couldn't find the plugin "eslint-plugin-ssr-friendly".

The plugin package is missing from node_modules.

fix

Run 'npm install --save-dev eslint-plugin-ssr-friendly'.

Upgrade

Version history

1.3.0latest on npm

Audit

Dependencies

eslintrequiredpeer dependency required for plugin to work

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/kopiro/eslint-plugin-ssr-friendly ↗

packagehttps://www.npmjs.com/package/eslint-plugin-ssr-friendly ↗