{"id":19947,"library":"eslint-plugin-ssr-friendly","title":"eslint-plugin-ssr-friendly","description":"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.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/kopiro/eslint-plugin-ssr-friendly","tags":["javascript","eslint","eslintplugin","ssr","server-side-rendering","globals","react","nodejs"],"install":[{"cmd":"npm install eslint-plugin-ssr-friendly","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-ssr-friendly","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-ssr-friendly","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin to work","package":"eslint","optional":false}],"imports":[{"note":"ESM default import; CommonJS also works as the package provides both.","wrong":"const eslintPluginSsrFriendly = require('eslint-plugin-ssr-friendly');","symbol":"plugin","correct":"import eslintPluginSsrFriendly from 'eslint-plugin-ssr-friendly';"},{"note":"Named export for accessing rule definitions directly.","wrong":"const rules = require('eslint-plugin-ssr-friendly').rules;","symbol":"rules","correct":"import { rules } from 'eslint-plugin-ssr-friendly';"},{"note":"Named export for accessing preset configs (e.g., 'recommended').","wrong":"const configs = require('eslint-plugin-ssr-friendly').configs;","symbol":"configs","correct":"import { configs } from 'eslint-plugin-ssr-friendly';"}],"quickstart":{"code":"// Install the plugin\n// npm install --save-dev eslint-plugin-ssr-friendly\n\n// In .eslintrc.js\nmodule.exports = {\n  plugins: ['ssr-friendly'],\n  extends: ['plugin:ssr-friendly/recommended'],\n  rules: {\n    'ssr-friendly/no-dom-globals-in-module-scope': 'error',\n    'ssr-friendly/no-dom-globals-in-constructor': 'error',\n    'ssr-friendly/no-dom-globals-in-react-cc-render': 'error',\n    'ssr-friendly/no-dom-globals-in-react-fc': 'error',\n  },\n};\n\n// Example code that will trigger errors:\n// const width = window.innerWidth; // module scope error\n// class MyComp extends React.Component {\n//   render() { return <div>{window.innerWidth}</div>; } // render error\n// }","lang":"javascript","description":"Quick setup using recommended config; shows how to enable all rules and example violations."},"warnings":[{"fix":"Manually review code that accesses DOM globals through functions or variables.","message":"The plugin only detects direct use of DOM globals in certain scopes; it does not catch indirect access via helper functions or properties.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure all uses of DOM globals in functions are guarded with 'if (typeof window !== \"undefined\")'.","message":"Rules 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Specify exact version in package.json (e.g., \"eslint-plugin-ssr-friendly\": \"1.3.0\") and review changelog before upgrading.","message":"The 'recommended' config may change between minor versions; pin your eslint-plugin-ssr-friendly version to avoid unexpected rule changes.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure 'eslint-plugin-ssr-friendly' is installed and added to plugins: ['ssr-friendly'].","cause":"The plugin is not installed or not listed in the 'plugins' array.","error":"Definition for rule 'ssr-friendly/no-dom-globals-in-module-scope' was not found."},{"fix":"Run 'npm install --save-dev eslint-plugin-ssr-friendly'.","cause":"The plugin package is missing from node_modules.","error":"ESLint couldn't find the plugin \"eslint-plugin-ssr-friendly\"."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}