Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
JeanLebrument opened this issue Nov 9, 2015 · 1 comment

Comments

@JeanLebrument
Copy link

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
Copy link

gnasherx commented Jul 2, 2017

i am also facing same issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants