Reactotron: reactrotron-react-native should be listed in the project's dependencies

[nonameolsson]

I get the following error in Reactotron.Config.js:1 from Eslint when following the instructions:

file: 'file:///Users/nonameolsson/Development/ReactNative/button/ReactotronConfig.js'
severity: 'Error'
message: ''reactotron-react-native' should be listed in the project's dependencies, not devDependencies. (import/no-extraneous-dependencies)'
at: '1,1'
source: 'eslint'

This is my package.json:

{
  "name": "button",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "build": "cd android && ./gradlew assembleRelease",
    "emulator-android": "emulator -avd react",
    "flow": "flow; test $? -eq 0 -o $? -eq 2",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "rc-start": "npm start -- --reset-cache",
    "clean": "rm -rf $TMPDIR/react-* && watchman watch-del-all && npm cache clean",
    "clean-start": "npm run clean && npm run rc-start",
    "fresh-install": "rm -rf $TMPDIR/react-* && watchman watch-del-all && rm -rf ios/build/ModuleCache/* && rm -rf node_modules/ && npm cache clean && npm install",
    "fresh-start": "npm run fresh-install && npm run rc-start",
    "tron": "node_modules/.bin/reactotron"
  },
  "dependencies": {
    "eslint": "^3.12.0",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-config-airbnb-flow": "^1.0.2",
    "eslint-config-rallycoding": "^3.1.0",
    "react": "15.4.1",
    "react-native": "0.39.2"
  },
  "devDependencies": {
    "babel-jest": "17.0.2",
    "babel-preset-react-native": "1.9.0",
    "flow-bin": "^0.36.0",
    "jest": "17.0.3",
    "react-test-renderer": "15.4.1",
    "reactotron-react-native": "^1.6.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

When I start the app it doesn't connect to Reactotron. Am I missing something?

[skellock]

It's fine to put it in dependencies as long as you put a if (__DEV__) wrapper around the Reactotron.connect(). You don't want it to run in production.

It should be able to connect though. Are you running on a device or emulator? iOS or Android?

[nonameolsson]

Thanks! Now I got it to work. But why does it complain about it? I thought that reactotron-react-native should be in the devDependencies?

It works in the terminal, but I can't get the GUI client to work. It doesn't seem connect.

I run both an Android and an iOS emulator on MacOS.

[skellock]

The complaint is because your linter knows that if you're using import. es6 module loading is a compile-time thing (as opposed to require).

Check out how we do the reactjs demo. See how we're using require that's guarded with if? In React Native that would be if (__DEV__).

The easiest way is to make them dependencies. Ensure your connect() statement is only run when __DEV__ is true.

Downside is:

• you're shipping a few more libraries (not many) in your production bundle. 👎 (I honestly think it's negligible, but some folks care deeply about that.)

Upside is:

• you can leave the Reactotronimports in, so your code base doesn't have to have if statements littered everywhere. 👍
• as long as you don't call Reactotron.connect() in your config, you can still call Reactotron.log() anywhere you want. If you're not connected, it'll never try to send anything. 🌯
• if you ever need to debug a production build on a device, it's easy. 🎉

Use whatever works for you.

Historically this is something I've flipped-flopped on many times. My current position is... screw it, but it in dependencies, it's easier and the benefits outweigh the drawbacks.

[nonameolsson]

Thank you for answer my question so fast! I will play around with it to see if I can get it to work with the GUI.

👍

[skellock]

Make sure you're not running the GUI at the same time as the console. There can only be 1. ⚔

:)

[fengerzh]

Here is my ReactotronConfig.js, FYI:

/* global __DEV__ */
/* eslint import/no-extraneous-dependencies: 0 */

if (__DEV__) {
  const Reactotron = require('reactotron-react-native').default; // eslint-disable-line global-require
  Reactotron
    .configure() // controls connection & communication settings
    .useReactNative() // add all built-in react native plugins
    .connect(); // let's connect!
}