Menu
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.
363
Creating a WebSockets connection In React Native, we can create a connection using the following code: var ws = new WebSocket('ws://host.com/path'); Here the link corresponds to the socket service running on the backend.
The onopen event is an event that is fired whenever the WebSocket is open.
To summarize in brief, the process for implementing WebSockets in a React Native app is as follows: The React Native app create a new WebSockets connection and store it in a reference variable, ws
The WebSocket context can be accessed anywhere in the app using the useContext Hook, and all the included functionality will be available. Additionally, a real-world app would also need to handle the instances of socket disconnecting and reconnecting, and handling client exit.
Set and manage global state for a small React Native app built from functional components, without using Redux or Mobx. Developers may want to use global state when many components need access to the same stateful information, such as the current user’s info or theme settings (light mode or dark mode).
The initiation of the WebSocket works as a part of the React cycle. In the case of socket failure, you could easily handle or provide feedback to the user. This can be handled centrally. For a given event, there will only be one event binding.
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
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
