# svelte/no-top-level-browser-globals

disallow using top-level browser global variables

# 📖 Rule Details

This rule reports top-level browser global variables in Svelte components. This rule helps prevent the use of browser global variables that can cause errors in SSR (Server Side Rendering).

<script>
  /* eslint svelte/no-top-level-browser-globals: "error" */
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';

  /* ✓ GOOD */
  onMount(() => {
    const a = localStorage.getItem('myCat');
    console.log(a);
  });

  /* ✓ GOOD */
  if (browser) {
    const a = localStorage.getItem('myCat');
    console.log(a);
  }

  /* ✓ GOOD */
  if (typeof localStorage !== 'undefined') {
    const a = localStorage.getItem('myCat');
    console.log(a);
  }

  /* ✗ BAD */
  const a = localStorage.getItem('myCat');
  console.log(a);
</script>

# 🔧 Options

Nothing.

# 📚 Further Reading

• $app/environment documentation > browser

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v3.8.0

# 🔍 Implementation

• Rule source
• Test source