Redux-devtools: React Native 0.59.1 `FAIL Inject ReduxDevTools server into React Native local server, the file `react-native/local-cli/server/server.js` not found.`

[PaulMest]

I'm trying to get Redux Devtools to show up in React Native Debugger and running into a lot of problems. The two main issues:
1) There is a lot of outdated (and thus, conflicting) documentation across multiple repos
2) Using the latest packages (I think) I run this command and get the following error:

$ yarn redux-devtools --hostname=localhost --port=8000 --injectserver=reactnative

FAIL Inject ReduxDevTools server into React Native local server, the file react-native/local-cli/server/server.js not found.

Full package versions here

  "dependencies": {
    "@babel/plugin-proposal-export-default-from": "^7.2.0",
    "@react-native-community/async-storage": "^1.2.1",
    "blob-polyfill": "^3.0.20180112",
    "buffer": "^5.2.1",
    "events": "^3.0.0",
    "hoist-non-react-statics": "^3.0.1",
    "initials": "^3.0.0",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "pouchdb-adapter-cordova-sqlite": "^2.0.5",
    "pouchdb-adapter-http": "7.0.0",
    "pouchdb-adapter-websql": "7.0.0",
    "pouchdb-core": "7.0.0",
    "pouchdb-mapreduce": "7.0.0",
    "pouchdb-replication": "7.0.0",
    "pouchdb-upsert": "^2.2.0",
    "prop-types": "^15.7.2",
    "react": "16.8.3",
    "react-native": "0.59.1",
    "react-native-config": "^0.11.7",
    "react-native-device-info": "^0.22.5",
    "react-native-easy-gestures": "^2.1.2",
    "react-native-fabric": "^0.5.1",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-image-crop-picker": "^0.21.1",
    "react-native-maps": "^0.21.0",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-material-menu": "^0.4.2",
    "react-native-modal": "^6.5.0",
    "react-native-popup-menu": "^0.15.4",
    "react-native-safari-view": "^2.1.0",
    "react-native-screens": "^1.0.0-alpha.22",
    "react-native-search-bar": "^3.4.2",
    "react-native-swipeout": "^2.3.6",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^3.4.0",
    "react-redux": "^5.1.1",
    "redux": "^4.0.1",
    "redux-actions": "^2.6.5",
    "redux-logger": "^3.0.6",
    "redux-promise": "^0.6.0",
    "rn-fetch-blob": "^0.10.13",
    "sync-promise": "^1.1.0",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-external-helpers": "^7.0.0",
    "@babel/polyfill": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "10",
    "babel-jest": "23.6.0",
    "chai": "^4.1.2",
    "chai-enzyme": "^1.0.0-beta.1",
    "cheerio": "^1.0.0-rc.2",
    "deep-eql": "^3.0.1",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "eslint": "^5.15.3",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-module-utils": "^2.3.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-lodash": "^5.1.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-native": "^3.6.0",
    "jest": "23.6.0",
    "jest-fetch-mock": "^1.6.6",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-dom": "^16.5.2",
    "react-test-renderer": "16.5.1",
    "redux-devtools-cli": "^0.0.1-1",
    "redux-mock-store": "^1.5.3",
    "remote-redux-devtools": "^0.5.16",
    "remotedev-rn-debugger": "^0.8.4",
    "schedule": "^0.4.0",
    "sinon": "^6.3.4",
    "sinon-chai": "^3.2.0"
  }

[PaulMest]

I'm guessing it is because react-native cli has been separated out into its own repo @react-native-community/react-native-cli and thus the server.js has moved.

[compojoom]

Has anyone gotten this to work?

I tried hacking the new path in the /node_modules/redux-devtools-cli/bin/injectServer.js

but the generated server.js is wrong and afterwards you cannot start the packager. I'm not sure if that server.js is the right file, or if we have to update our inject code.

[compojoom]

I looked at this a little further.
I got a test project with rn .57 and injected the server into it. We end up with this code in
node_modules/react-native/local-cli/server/server.js

/**
 * Starts the React Native Packager Server.
 */
function server(argv: mixed, config: RNConfig, args: RunServerArgs) {
  /* $FlowFixMe(site=react_native_fb) ConfigT shouldn't be extendable. */
  const configT: ConfigT = config;
/* redux-devtools-cli start */
    require("redux-devtools-cli")({"host":"localhost","port":5678,"protocol":"http","protocolOptions":null,"dbOptions":{"client":"sqlite3","connection":{"filename":":memory:"},"pool":{"min":1,"max":1,"idleTimeoutMillis":360000000,"disposeTimeout":360000000},"useNullAsDefault":true,"debug":false,"migrate":true},"maxRequestBody":"16mb","logLevel":3,"wsEngine":"ws"})
      .then(_remotedev =>
        _remotedev.on("ready", () => {
          if (!_remotedev.portAlreadyUsed) console.log("-".repeat(80));
        runServer(args, configT);
        })
      );
/* redux-devtools-cli end */
}

Now the thing is the cli in rn .57 has this code:

/**
 * Starts the React Native Packager Server.
 */
function server(argv: mixed, config: RNConfig, args: RunServerArgs) {
  /* $FlowFixMe(site=react_native_fb) ConfigT shouldn't be extendable. */
  const configT: ConfigT = config;
  runServer(args, configT);
}

and the new cli in rn .59 no longer has this server function. It directly calls runServer.

https://github.com/react-native-community/react-native-cli/blob/master/packages/cli/src/commands/server/server.js

I manually modified the new server.js file in:
https://github.com/react-native-community/react-native-cli/blob/master/packages/cli/src/commands/server/server.js#L12

and added this code:

/**
 * Starts the React Native Packager Server.
 */
function server(argv, ctx, args) {
  /* $FlowFixMe(site=react_native_fb) ConfigT shouldn't be extendable. */
  const configT = ctx;
  /* redux-devtools-cli start */
  require("redux-devtools-cli")({"host":"localhost","port":5678,"protocol":"http","protocolOptions":null,"dbOptions":{"client":"sqlite3","connection":{"filename":":memory:"},"pool":{"min":1,"max":1,"idleTimeoutMillis":360000000,"disposeTimeout":360000000},"useNullAsDefault":true,"debug":false,"migrate":true},"maxRequestBody":"16mb","logLevel":3,"wsEngine":"ws"})
    .then(_remotedev =>
      _remotedev.on("ready", () => {
        if (!_remotedev.portAlreadyUsed) console.log("-".repeat(80));
        _runServer.default(argv, configT, args)
      })
    );
  /* redux-devtools-cli end */
}

With this change when I start the packager I get this:

but I'm still missing the redux actions in react-native-debugger.

We are using composeWithDevTools from remote-redux-devtools. Is it working with the new rredux-devtools-cli?
@zalmoxisus - any ideas?

[squalvj]

+1

[PaulMest]

Someone on my team just configured our project so that React Native Debugger works pretty well with our React Native iOS app on 0.60.5. This includes the Redux DevTools. No special config is necessary any longer, and you can just follow the React Native Debugger instructions.