Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ Android ] Unable to hot reload whilst debugging JS remotely

See original GitHub issue

Current Behaviour

Run the following command yarn run haul start --platform android The app bundles successfully however when trying to hot reload components , I am receiving the following errors http://10.0.2.2:8081/0.508ca35a4baeb9f81480.hot-update.js net::ERR_CONNECTION_TIMED_OUT

[HMR] Update check failed: Error: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://10.0.2.2:8081/0.508ca35a4baeb9f81480.hot-update.js' failed to load.
    at hotDownloadUpdateChunk (eval at evalJS (http://localhost:8081/debuggerWorker.js:64:11), <anonymous>:9:12)
    at hotEnsureUpdateChunk (eval at evalJS (http://localhost:8081/debuggerWorker.js:64:11), <anonymous>:270:13)
    at eval (eval at evalJS (http://localhost:8081/debuggerWorker.js:64:11), <anonymous>:241:14)
    at tryCallOne (webpack-internal:///./node_modules/promise/setimmediate/core.js:37:12)
    at eval (webpack-internal:///./node_modules/promise/setimmediate/core.js:123:15)
    at eval (webpack-internal:///./node_modules/react-native/Libraries/Core/Timers/JSTimers.js:1:4804)
    at _callTimer (webpack-internal:///./node_modules/react-native/Libraries/Core/Timers/JSTimers.js:1:2609)

Please note that in the terminal I see GET /508ca35a4baeb9f81480.hot-update.json 200 43 - 0.451 ms However the network panel in the debugger seems to be trying to load hot-update.js

Expected Behaviour

Components should be able to hot reload as they do on iOS

Haul Configuration (webpack.haul.js)


module.exports = ({ platform, root }, defaults) => ({
  entry: `./index.${platform}.js`,
  resolve: {
    ...defaults.resolve,
    alias: {
      ...defaults.resolve.alias,
      Config: path.join(root, 'config'),
      Components: path.join(root, 'app', 'components'),
      Routes: path.join(root, 'app', 'routes'),
      Util: path.join(root, 'app', 'util'),
      Reducers: path.join(root, 'app', 'reducers'),
    },
  },
  module: {
    ...defaults.module,
    rules: [
      {
        test: /\.js?$/,
        include: '/node_modules/seamless-immutable',
        exclude: '/node_modules/',
        use: [
          {
            loader: 'react-hot-loader/webpack',
          },
        ],
      },
    ].concat(defaults.module.rules || []),
  },
});