mjohnston / react-native-webpack-server

Build React Native apps with Webpack
MIT License
933 stars 84 forks source link

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

Open JeanLebrument opened 8 years ago

JeanLebrument commented 8 years ago

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?

gnasherx commented 7 years ago

i am also facing same issue.