Define WebSocket as a global in ES Lint for a React Native app

Question

I get the following eslint error:

42:21  error  'WebSocket' is not defined  no-undef

You cannot import WebSocket from react-native because it's a global, but when I add WebSocket as globals to my .eslintrc.yml it doesn't change the outcome of the error:

globals:
   WebSocket: true

How do I define WebSocket as a global in ES Lint for a React Native app?

Can this be fixed? Currently my .eslintrc looks like this:

env:
  browser: false
  es6: true
  commonjs: true
  node: true
extends: 'airbnb'
parser: babel-eslint
globals:
    WebSocket: true
parserOptions:
  ecmaFeatures:
    experimentalObjectRestSpread: true
    jsx: true
  sourceType: module
plugins:
  - react
  - react-native
rules:
  indent:
    - error
    - tab
    - {"SwitchCase": 1}
  linebreak-style:
    - error
    - unix
  quotes:
    - error
    - double
  semi:
    - error
    - never
  no-tabs: off
  max-len: off
  no-console: off
  no-plusplus: off
  global-require: off
  import/no-unresolved: off
  import/extensions: off
  class-methods-use-this: off
  react/jsx-no-bind: off
  react/forbid-prop-types: off
  react/prefer-stateless-function: off
  react/jsx-indent: [2, 'tab']
  react/jsx-indent-props: [2, 'tab']
  react/jsx-filename-extension: [1, { extensions: ['.js', '.jsx'] }]
  react/jsx-uses-react: error
  react/jsx-uses-vars: error
  react-native/no-unused-styles: 2
  react-native/split-platform-components: 2
  react-native/no-inline-styles: off
  react-native/no-color-literals: off

I can get rid of it using the inline comment

/* globals WebSocket:true */

Also when I don't inherit from the airbnb eslint, but I can't figure out which lint rule in Airbnb is responsible for blocking this.

How are you running eslint? Also are you sure your .eslintrc.yml file is being used when running eslint? — Gyandeep

Ilya Volodin Ilya Volodin · Accepted Answer · 2017-03-05T18:23:52

Based on the information you provided, it looks like your config file is not being picked up for some reason. Configuration for globals looks correct and should work. In order to figure out what is going on, you should do two things. First you can run eslint --print-config path_to_some_js_file to see how your config looks like after ESLint resolves all dependencies and cascading. Most likely that config will not have globals declared. After that, you can run eslint --debug path_to_file to see all config files that are being used by ESLint. If your file is not being included, check all other config files and verify that they don't have root: true in them (which would prevent ESLint from merging configs in parent directories). For more information about CLI flags you can look at ESLint documentation

Define WebSocket as a global in ES Lint for a React Native app

1 Answers