Skip to content

Simlator keep loading (Loading from localhost 8080...) when using run hot #136

Description

@JeanLebrument

Hello,

I'm facing a problem when using npm run hot that I don't have if I use npm start

My simulator stay on the loading screen: Loading from localhost:8080.

Here is my webpack configuration:

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

var config = {

  debug: true,

  devtool: 'source-map',

  entry: {
    'index.ios': ['./javascript/ios.js'],
    'index.android': ['./javascript/android.js'],
  },

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

  module: {
    preLoaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "eslint-loader"
    }],
    loaders: [{
      test: /\.js$/,
      include: [
        path.resolve(__dirname, 'javascript'),
        path.resolve(__dirname, 'node_modules/react-native-search-bar'),
        path.resolve(__dirname, 'node_modules/react-native-addressbook'),
        path.resolve(__dirname, 'node_modules/rx'),
        path.resolve(__dirname, 'node_modules/react-native-fabric-digits'),
      ],
      loader: "babel-loader",
      query: {
        stage: 0,
        plugins: [],
        blacklist: "validation.react",
      }
    }]
  },

  plugins: [],

};

// Hot loader
if (process.env.HOT) {
  config.devtool = 'eval'; // Speed up incremental builds
  config.entry['index.ios'].unshift('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.plugins.unshift(new webpack.HotModuleReplacementPlugin());
  config.module.loaders[0].query.plugins.push('react-transform');
  config.module.loaders[0].query.extra = {
    'react-transform': {
      transforms: [{
        transform: 'react-transform-hmr',
        imports: ['react-native'],
        locals: ['module']
      }]
    }
  };
}

// 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;

And my package.json file:

{
  "name": "ReactNativeFluxBoilerplate",
  "version": "0.0.1",
  "description": "React native boilerplate with Flux, React native webpack and hot reload",
  "keywords": [
    "react native",
    "flux",
    "webpack",
    "hot reload"
  ],
  "homepage": "https://github.com/OssamaZ/react-native-flux-boilerplate",
  "private": true,
  "scripts": {
    "start": "./node_modules/.bin/react-native-webpack-server start",
    "hot": "HOT=1 ./node_modules/.bin/react-native-webpack-server start --hot",
    "start-android-webpack-server": "react-native-webpack-server start -e index.android -P 9090 -p 9091 -w 9092",
    "install-app-to-android-device": "cd android && ./gradlew installDebug",
    "setup-reverse-tcp-for-android-device": "adb reverse tcp:8081 tcp:9090",
    "launch-android-app-on-device": "cd android && adb shell am start -n com.\"$npm_package_name\"/.MainActivity",
    "android": "npm run-script setup-reverse-tcp-for-android-device && npm run-script install-app-to-android-device && npm run-script launch-android-app-on-device && echo \"Please Reload JS on the app from the menu after the webpack server starts below\" && npm run-script start-android-webpack-server"
  },
  "dependencies": {
    "react-native": "^0.13.0",
    "react-native-contacts": "../react-native-contacts",
    "react-native-contacts-rx": "^1.0.1",
    "react-native-fabric-digits": "^1.0.5",
    "react-native-search-bar": "^2.2.0",
    "react-redux": "^4.0.0",
    "redux": "^3.0.2",
    "rx": "^4.0.6"
  },
  "devDependencies": {
    "babel-core": "^5.8.24",
    "babel-eslint": "^4.1.3",
    "babel-loader": "^5.3.2",
    "babel-plugin-react-transform": "^1.1.1",
    "eslint": "^1.6.0",
    "eslint-config-airbnb": "^0.1.0",
    "eslint-loader": "^1.0.0",
    "eslint-plugin-react": "^3.5.1",
    "events": "^1.0.2",
    "flux": "^2.1.1",
    "keymirror": "^0.1.1",
    "lodash": "^3.10.1",
    "react": "^0.14.2",
    "react-hot-loader": "^1.3.0",
    "react-native-webpack-server": "^0.8.0",
    "react-transform-hmr": "^1.0.1",
    "redux-devtools": "^2.1.5",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.11.0"
  }
}

Any suggestion?

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions