Hot loading not working.

[jrm2k6]

I followed the documentation to get react-hot-loader working in my app.

It seems that it doesn't do anything though. I keep changing one of my component and the changes are not applied until I manually refresh from the emulator.

./node_modules/.bin/react-native-webpack-server start --hot=1

"dependencies": {
    "babel": "^5.8.23",
    "babel-loader": "^5.3.2",
    "lodash": "^3.10.1",
    "react-native": "^0.11.0-rc",
    "react-native-button": "^1.2.1",
    "react-redux": "^2.1.0",
    "redux": "^2.0.0",
    "redux-thunk": "^0.1.0",
    "superagent": "^1.3.0",
    "webpack-dev-server": "^1.10.1"
  },
  "devDependencies": {
    "react-hot-loader": "^1.3.0",
    "react-native-webpack-server": "^0.4.0-rc",
    "webpack": "^1.12.1",
    "webpack-dev-server": "^1.10.1"
  }

webpack.config.js

var fs = require('fs');
var path = require('path');
var webpack = require('webpack');

var config = {

  debug: true,

  devtool: 'source-map',

  entry: {
    'index.ios': ['./src/app.js'],
  },

  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
  },

  module: {
    loaders: [
      {test: /\.js$/,
        loaders: ['babel?stage=0&blacklist=validation.react']},
    ],
  },

  plugins: [],

};

// Hot loader
if (process.env.HOT) {
  config.devtool = 'eval'; // Speed up incremental builds
  config.entry['index.ios'].unshift('./node_modules/react-native-webpack-server/hot/entry');
  config.entry['index.ios'].unshift('webpack/hot/only-dev-server');
  config.entry['index.ios'].unshift('webpack-dev-server/client?http://localhost:8082');
  config.output.publicPath = 'http://localhost:8082/';
  config.module.loaders[0].loaders.unshift('react-hot');
  config.plugins.unshift(new webpack.HotModuleReplacementPlugin());
}

// Production config
if (process.env.NODE_ENV === 'production') {
  config.plugins.push(new webpack.optimize.OccurrenceOrderPlugin());
  config.plugins.push(new webpack.optimize.UglifyJsPlugin());
}

module.exports = config;

Live Reload enabled in the emulator.

Any idea where I should look now? Sorry if it is not the right place to ask.

[amccloud]

Live reload does not need to be enabled. You do need to have the chrome or safari debugger running.

[jrm2k6]

I do have the Chrome debugger running.
@amccloud Is there any other information besides what I posted that could help to get why it doesn't work?

[elliottsj]

@jrm2k6 Based on your webpack config, you also need to set a HOT environment variable, i.e.

HOT=1 ./node_modules/.bin/react-native-webpack-server start --hot

[jrm2k6]

@elliottsj thanks for getting back to me.
Your hint might be what I am missing. I was just running ./node_modules/.bin/react-native-webpack-server start --hot=1 before.
Now, when I run it using HOT=1 ./node_modules/.bin/react-native-webpack-server start --hot it fails as it gives a bunch of error message always complaining about react module not found

ERROR in ./src/app.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/jrm2k6/Workspace/Perso/Project/src
 @ ./src/app.js 1:344-375

It seems that it is probably because of my webpack config. Any idea?

[gaearon]

@jrm2k6

Please use 0.5.0 and see new hot reloading instructions: #67. We don't rely on React Hot Loader or react/lib/ReactMount anymore so this should help you.

[jrm2k6]

Will do during my lunch break. And will let you know if it works! Thanks
On Sep 17, 2015 8:39 AM, "Dan Abramov" [email protected] wrote:

@jrm2k6 https://github.com/jrm2k6

Please use 0.5.0 and see new hot reloading instructions: #67
#67. We
don't rely on React Hot Loader or react/lib/ReactMount anymore so this
should help you.

—
Reply to this email directly or view it on GitHub
#57 (comment)
.

[jrm2k6]

@gaearon I gave it a try but it seems to be complaining about not finding 'react'.

I have the following package.json/webpack config/babelrc.
https://gist.github.com/jrm2k6/7984a38b510fe200320a

The error message when starting the webpack-dev-server is:

ERROR in ./~/react-native/Libraries/react-native/react-native.js
Module build failed: SyntaxError: /Users/jrm2k6/Workspace/Perso/MyProject/node_modules/react-native/Libraries/react-native/react-native.js: Line 20: Did you mean "react"?
  18 | //   var ReactNative = {...require('React'), /* additions */}
  19 | //
> 20 | var ReactNative = Object.assign(Object.create(require('React')), {
     |                                                       ^
  21 |   // Components
  22 |   ActivityIndicatorIOS: require('ActivityIndicatorIOS'),
  23 |   DatePickerIOS: require('DatePickerIOS'),

I am still fairly new to webpack so sorry if it is an easy problem to fix.
It seems to be coming from babel-core.

at File.errorWithNode (/Users/jrm2k6/Workspace/Perso/FitBuddies/node_modules/babel-core/lib/transformation/file/index.js:489:13)
    at check (/Users/jrm2k6/Workspace/Perso/FitBuddies/node_modules/babel-core/lib/transformation/transformers/validation/react.js:23:18)
    at NodePath.CallExpression (/Users/jrm2k6/Workspace/Perso/FitBuddies/node_modules/babel-core/lib/transformation/transformers/validation/react.js:40:7)

[elliottsj]

@jrm2k6 In your webpack config for babel-loader, make sure you ignore /node_modules/, or selectively include your app's source directory, e.g.

loaders: [{
  test: /\.js$/,
  include: [
    path.resolve(__dirname, 'src')
  ],
  loader: 'babel',
  query: {
    stage: 0,
    plugins: []
  }
}]

[jrm2k6]

@elliottsj I remember not ignore node_modules because it was the only way I got 3rd party modules (in my case react-native-button) to work, and playing with include didn't work either. Let me give it a quick try.

[elliottsj]

I've had success selectively including specific 3rd-party packages like this:

include: [
  path.resolve(__dirname, 'src'),
  path.resolve(__dirname, 'node_modules/some-package')
],

[jrm2k6]

@elliottsj Yes, I just tried that. It builds correctly.
Nevertheless, the application doesn't run as it complains about the use of a reserved keyword

It seems that I have to choose between including or excluding but I cannot have both.
I just tried to ignore node_modules besides the 3rd party package I want but it doesn't work.

Any idea?

[gaearon]

@jrm2k6

There's a reason examples don't use .babelrc for react-transform and instead configure it in Webpack config: you don't want to transform React Native sources with it. It will work if you remove .babelrc and instead do like the examples do.

[jrm2k6]

@gaearon Sorry for the hassle. I might be missing something though.
.babelrc file removed. Copy pasted the webpack.config.js from the Babel example, changed the main entry point, and replace exclude node_module by include of my src folder and third party node modules for react-native button.
Still the same error.

[gaearon]

@jrm2k6

You are probably getting tripped by Packager caching: #63.

Try running node and copy pasting this:

var os = require('os');
var fs = require('fs');
var path = require('path');

  // Clear react-packager cache
  var tempDir = os.tmpdir();

  var cacheFiles = fs.readdirSync(tempDir).filter(function (fileName) {
    return fileName.indexOf('react-packager-cache') === 0;
  });

  cacheFiles.forEach(function (cacheFile) {
    var cacheFilePath = path.join(tempDir, cacheFile);
    fs.unlinkSync(cacheFilePath);
    console.log('Deleted cache: ', cacheFilePath);
  });

  if (!cacheFiles.length) {
    console.log('No cache files found!');
  }

[jrm2k6]

@gaearon Thanks! That was it. I remember checking #63 but being a bit confused.
Thanks guys for your help!

[niftylettuce]

@jrm2k6 thanks for documenting here - i was so confused by react-native-button not working