gaearon / react-hot-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

3.9K 110.0 880.0 134 KB

Minimal live-editing example for React

License: MIT License

HTML 11.20% JavaScript 88.80%

react-hot-boilerplate's Introduction

Deprecated

Use this instead:

https://github.com/pmmmwh/react-refresh-webpack-plugin/

react-hot-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

megalithic alexkuz sanderspies hulufei teabough wisely051543 lancefisher msikma paultannenbaum mattfreer iamkhushbajwa marshmallowcreme davidascher zenlambda ryanflorence justinwoo masylum willcode2surf radishmouse terakilobyte desenmeng jvanaert jhgg eiriklv wynout pleunv avi-turetsky rockymeza everblaze aldraco uxiliary cycle-react-examples wonsikin iamstarkov jeffgca kwangkim failpunk bisone step2 bpugh shalomvolchok sashakhad sd0s hellocreep robertn702 tomrogers3 theverything slonoed trodrigues bazango dtsao rrarunan hoangthehung dtinth frankpaul1 glenjamin gilbox morgante bobbyrenwick mattlewis92 rchanou jxnblk dinojay tayzlor marcello3d rodfernandez hidden4003 trustnik pebie alexkval npverni lxe aluaders ilwebdifabio nikhilbaradwaj ziggreen theianjones josebalius cmelion blancosway mingzepeng rodrigobacelli pmlarocque hughevans danielwerthen batmanimal bcbcb w01fgang andrewkslv robbiedhickey jg bdswiss michaelbenin linkedlist blkmutt yanhua365 ransanjeev ntwcklng colevoss gitsebs

react-hot-boilerplate's Issues

Hot reload doesn't work on Windows

Cloned latest version. Run npm install/start open localhost:3000 and change "Hello World" to "Bar"... and nothing happens.

Newest React.js version support out of the box

Status/Roadmap of the project

First of all thank you @gaearon for this incredible and amazing initiative on creating the Hot Loader.

I've raised this ticket, in order to get a better understanding on whether the project is still going to be developed/finished. At the moment the project seems to feel, slap-my-face-now, abandoned? (just by looking at the stats, correct me if i'm wrong).

So instead of me moaning, it would be worthwile that we identify the remaining open features/tasks to be developed and have a better understanding whether it has any future or not.

IMHO understanding what is outstanding will also help the potential contributors and maybe attract more enthusiastic people to provide some help.

Thanks!

Not work with material-ui library

It works great but when I install material-ui and require it. I got this errors:

ERROR in ./~/material-ui/src/js/toolbar-group.jsx
Module parse failed: /Users/cuongcua/Learn/Reactjs/react-hot-boilerplate/node_modules/material-ui/src/js/toolbar-group.jsx Line 22: Unexpected token <
You may need an appropriate loader to handle this file type.

Can you tell me the solution?

npm start error

I just download the repository, run npm install and all is good, but when I try to run with npm start I am getting an error.

This is the npm-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart [email protected]
6 info start [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start script
9 verbose stack Error: [email protected] start: node server.js
9 verbose stack Exit status 3221225501
9 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:214:16)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at EventEmitter.emit (events.js:172:7)
9 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at ChildProcess.emit (events.js:172:7)
9 verbose stack at maybeClose (internal/child_process.js:818:16)
9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd C:\Luis\Desarrollo\React\react-hot-boilerplate-master
12 error Windows_NT 6.1.7600
13 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
14 error node v4.2.3
15 error npm v2.14.7
16 error code ELIFECYCLE
17 error [email protected] start: node server.js
17 error Exit status 3221225501
18 error Failed at the [email protected] start script 'node server.js'.
18 error This is most likely a problem with the react-hot-boilerplate package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error node server.js
18 error You can get their info via:
18 error npm owner ls react-hot-boilerplate
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

Any ideas? Thanks

How to debug this on webstorm

i have added devtool: "eval" to the webpack.config, but i still not able to make a breakpoint hit on webstorm, i created the debug config pointed at http://localhost:3000, i dont know how to debug this, any ideas?

First save of file doesn't have any effect

Copy-pasting webpack/webpack#703 for posterity:

I have this issue on OS X Yosemite.
First time I save any file, watcher doesn't notice. Subsequent saves work.

This is a Webpack 1.5.1 issue, I don't have this problem on 1.4.15.
Downgrade if it's an issue for you until this is resolved.

How to add support for immutable js?

When using for example Map() object from immutable.js , Chrome throws an error:

Uncaught TypeError: Constructor Map requires 'new'

Build and package to production aka another computer

Hi!

I'm very new at npm, node, react and all of this - but I managed to use with great ease your react-hot-boilerplate configuration script! 👍

Now that I have a site I like when I run npm start, what would be the easiest/best way to add a production build in the configuration? I would like to have a little folder build with all the final html and js files in it when I build for prod, is that what I should expect?

Thank you very much for your work and time!

Ensure it runs fine with Webpack 2

See gaearon/react-transform-boilerplate#124 (comment)

webpack says nothing changed even when I added a line

http://take.ms/0kfVz

I am using mac.

Is this because React should return only one element. If that is the case then ideally I should get an error in console.

I see the error in terminal. Just wanted to know if it is possible to indicate someway that "hey something went wrong. Look at log in terminal.".

-

typescript support

Hi.

I did TypeScript version. You could refer it if somebody needs.

https://github.com/sormy/skeleton-react-typescript-hot-v1
https://github.com/sormy/skeleton-react-typescript-hot-v3

Thank you.

Is this project on the deprecation path as well?

As react-hot-loader has the 'Deprecation Notice'.

hot module is 404ing

Hi Dan,
Any clue what could be going on here? http://cl.ly/image/0E0l1w3C402N

I tried pulling out the config into a project im trying to get HMR working on, so its not specific to this repo, but I'm not sure where else to post. Here is the repo, and node server.js should start up and behave as shown above. Basically the module name doesnt appear to be updated in console so its still looking for the old module. Also I notice the compilation step happens twice.

Thanks,
Dave

In server.js publicPath not working but contentBase does it

Dear,

not sure if it's my mistake or not, but I could not make it work using publicPath; replacing it by contentBase on line 6 of server.js did it for me

Kind regards,

"webpack-dev-server": "1.6.5" is broken

Should probably update package.json to skip webpack-dev-server 1.6.5 (current config resolves to that version) as that seems to be broken and causes the boilerplate not to function.

Uncaught Error: "version" is a required argument.

Hi all,

I've been working all day trying to integrate this into an "old-school" react-js. With a Makefile.

So it has been a wild ride I admit. After a lot of tweaks and googling around I'm now stuck to a wall. Don't know what I do wrong.

The npm start says webpack: bundle is now VALID. without any warning.

Naviguating to localhost:3001 the console says :

[HMR] Waiting for update signal from WDS...
Deprecation warning: use moment.updateLocale(localeName, config) to chan ...
Uncaught Error: "version" is a required argument.
      getArg    @   util.js:28
      BasicSourceMapConsumer    @   source-map-consumer.js:292
      SourceMapConsumer @   source-map-consumer.js:26
      module.exports    @   index.js:88
      ReactCompositeComponentMixin.mountComponent   @   ReactCompositeComponent.js:148
WebSocket connection to 'ws://localhost:3001/sockjs-node/679/agc34szt/websocket' failed: Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received
[WDS] Hot Module Replacement enabled.

Oh maybe the problem is with the websocket connection ? Hum. Some more files 👍

webpack.config.js

var path = require("path"),
  webpack = require("webpack"),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: "source-map",
  entry: [
    "webpack-dev-server/client?http://localhost:3001",
    "webpack/hot/only-dev-server",
    "./src/index.jsx"
  ],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "build.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "TESTAPP",
      template: "src/index-template.html"
    }),
    new ExtractTextPlugin("build.css"),
    new webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    extensions: ["", ".jsx", ".js", ".json", ".svg", ".woff", ".ttf", ".eot"],
    root: [
      path.resolve('./src')
    ]
  },

    // moduleDirectories: [
    //   "./node_modules",
    //   "./node_modules/font-awesome",
    //   "./node_modules/font-awesome/css",
    //   "./src/img"
    // ]

  module: {

    // liste de nos loaders
    // ! \\ à noter que les loaders sont exécutés en ordre inverse
    // les premiers en dernier, en utilisant la sortie du suivant

    loaders: [

      {
        test: /\.jsx$/,
        loader: "babel",
        exclude: /(node_modules|bower_components)/,
        include: path.join(__dirname, "src"),
        query: {
          presets: ["es2015", "react"]
        }
      },

      {
        test: /\.json$/,
        loader: "json"
      },

      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
        // include: [
        //   path.join(__dirname, "src"),
        //   path.join(__dirname, "node_modules/font-awesome/css/font-awesome.css")
        // ]
      },

      {
        test: /\.svg$/,
        loader: 'svg-loader'
      },

      // {
      //   test: /\.svg$/,
      //   include: path.join(__dirname, "src/img"),
      //   loader: "svg"
      // },

      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: "file"
      }

      // {
      //   test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
      //   loader: 'url-loader?limit=100000'
      // }

    ]

  }
};

index.jsx

if (!window.TESTAPP_ROOT_URL) {
  window.TESTAPP_ROOT_URL = "http://localhost:3000";
}

if (!window.TESTAPP_APP_VERSION) {
  window.TESTAPP_APP_VERSION = "development";
}

var AppContainer = require('react-hot-loader');
var React = require('react');
var ReactDOM = require('react-dom');
var App = require('./app');

var locales = require("./locales");
var intlData = locales.getReactIntlData();

const rootEl = document.getElementById('app-container');

ReactDOM.render(
  <AppContainer>
   <App {...intlData} />
  </AppContainer>
,rootEl);

if (module.hot) {
  module.hot.accept('./app', function(){
    debugger
    ReactDOM.render(
      <AppContainer>
       <App {...intlData} />
      </AppContainer>
    ,rootEl);
  });
}

Do you see anything wrong with this ?

How to configure this project to be a ES6 project?

right now it's ES5

how to add bootstrap to the package

Does does not show an error after re introducing a syntax error

I've found when trying the project in the 'next' branch which uses react-hot-loader 3 the following to happen:

When I add a syntax error to a component it correctly show's me an error in the console.
When I fix the error it rebuilds correctly.
Adding the syntax error back in I get no errors in the console and renders without issue

This is happening consistently.

thanks

Aoshi

Add production build

We should have one. It’s not very obvious how to do it. 😉

Can't figure out the ES6 error

With my apologies for posting here - I'm trying to dip my toes into the ES6 + React + hot-reload waters, and this project really helped with getting things going. Everything works as described.

But now I'm trying to extend the example:

import React from 'react';

class OnOff extends React.Component {
  render() {
    return (
      <input type="checkbox" id="onoff" />
      <label for="onoff">Enable</label>
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <h1>Hello, world.</h1>
      <OnOff />
    );
  }
}

It leads to this error message:

   5 |     return (
   6 |       <input type="checkbox" id="onoff" />
>  7 |       <label for="onoff">Enable</label>
     |              ^
   8 |     );
   9 |   }
  10 | }

Changing things around moves the error in ways I really don't understand at all. It almost looks like JSX is not enabled, but that would lead to a lot more errors, and your minimal demo wouldn't even run!

I must be overlooking something totally trivial...
-jcw

Question only?

Hey I was trying to understand how the webpack auto reload is working.
I know your using a webpack-dev-server, but what part of your code is forcing the reload to happen when you edit a component?

Thanks in advance. Any resources is much appreciated.

How to deploy for production?

deploy to heroku

I'm new to webpack and babel. I'm trying to deploy this to heroku, but i think i need to change something first. Does anyone know of step by step instructions for deploying an app built on react-hot-boilerplate?

Unexpected token <

I've just made npm install and npm start and got Unexpected token <. I can't understand, why it's not working from scratch?

Webpack -p [WDS] Disconnected! Safari

Hello, thank you for the boilerplate! I am using it for a proof of concept.

Using Webpack -p I FTP'd index.html / bundle.js (it's a simple app)

I loaded my project on several iOS devices (android / windows seem to be working) and the page is blank white, using Ghostlab I inspected and the console spits out [WDS] Disconnected! seveal times (once every 10 seconds)

Can you advise? Thanks!

package.json


{
  "name": "react-hot-boilerplate",
  "version": "1.0.0",
  "description": "Boilerplate for ReactJS project with hot code reloading",
  "scripts": {
    "start": "node server.js",
    "lint": "eslint src"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gaearon/react-hot-boilerplate.git"
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack"
  ],
  "author": "Dan Abramov <[email protected]> (http://github.com/gaearon)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/gaearon/react-hot-boilerplate/issues"
  },
  "homepage": "https://github.com/gaearon/react-hot-boilerplate",
  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-eslint": "^4.1.3",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "eslint-plugin-react": "^3.6.2",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "css-loader": "^0.23.0",
    "flux": "^2.1.1",
    "jquery": "^2.1.4",
    "moment": "^2.10.6",
    "radium": "^0.15.3",
    "react": "^0.14.0",
    "react-dom": "^0.14.0",
    "react-widgets": "^3.1.3",
    "style-loader": "^0.13.0"
  }
}

webpack.config.js


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

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],

  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /\.gif$/,
      loader: "url-loader?mimetype=image/png"
    }, {
      test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
      loader: "url-loader?mimetype=application/font-woff"
    }, {
      test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
      loader: "file-loader?name=[name].[ext]"
    }, ]
  }
};

Not reloading after save

This looks like a really cool feature but I can't seem to get it to trigger no matter what. I've tried the other starter kits as well but no luck there either. For any changes to take effect I need to run npm start again each time.

Arch Linux 64 bit
node v0.10.36
npm 2.3.0

Browser console in Chromium 40.0.2214.93 (64-bit)

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

Output from running npm start.

> node server.js    
Listening at localhost:3000
Hash: 42936a5ff1b93df92458
Version: webpack 1.5.3
Time: 922ms
    Asset    Size  Chunks             Chunk Names
bundle.js  780270       0  [emitted]  main
chunk    {0} bundle.js (main) 680118 [rendered]

* MY EDIT BELOW
[0-165] built...etc

webpack: bundle is now VALID.

I change the text in the

in scripts/app.js but nothing happens in the browser. No more output or any error messages.

Please advice on how I can debug this.

Where is bundle.js?

I Can't find the index.html page resource /static/bundle.js

Bundling for production

How can I make the bundles smaller? Between react, jQuery, and bootstrap, my builds are already huge! I tried the following configurations, but it still seems to be very big (1.2MB). Is there a recommended configuration? It might be even better to avoid bundling jQuery, bootstrap, and react together. Having the separate will let the browser download these in parallel. Thoughts?

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.ProvidePlugin({
            $:      "jquery",
            jQuery: "jquery"
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            comments: false,
            sourceMap: false,
            mangle: {
                toplevel: true
            }
        })
    ]

hot reloading not functioning

any ideas why it is failing to hot reload? Am required to refresh in order to update while working on your react-dnd chess tutorial, thanks :)

not sure if am doing something incorrectly but needed to add es6 and jsx regex to the loaders as well as a resolve key for the extensions for it to render properly.

*11.7.2015 - installed Node 4.x, still not working unfortunately.
Re-installed webpack-dev-server globally after the new node install and it's now working.

Trouble embedding it in Flask app

I want the compiled app within my Flask (Python web framework) app which serves at port 5000. So I embedded the bundle within Flask template like:

<script src="http://localhost:3000/static/bundle.js"></script>`

I then load my app at localhost:5000 and it loads fine, all but the last request are successful. The last request is triggered by a code change and it fails since the request goes to port 5000.

Request URL:http://localhost:5000/

Request URL:http://localhost:3000/static/bundle.js

Request URL:http://localhost:3000/sockjs-node/info?t=1460205226170

Request URL:ws://localhost:3000/sockjs-node/388/o2owupos/websocket

Request` URL:http://localhost:5000/static/3d78a8f83264d3f603be.hot-update.json

Webpack generates following when I edit code:

Hash: be0f4b289250fb4f2536
Version: webpack 1.12.14
Time: 309ms
                               Asset      Size  Chunks             Chunk Names
                           bundle.js   1.01 MB       0  [emitted]  main
0.3d78a8f83264d3f603be.hot-update.js   3.73 kB       0  [emitted]  main
3d78a8f83264d3f603be.hot-update.json  36 bytes          [emitted]  
chunk    {0} bundle.js, 0.3d78a8f83264d3f603be.hot-update.js (main) 875 kB [rendered]

Please fix the request webpack makes to .hot-update.json too. All other requests are correct.

Sorry if this was the wrong place for raising this concern. I asked here as most people copy this repo for their react boilerplates. I look forward to be using your awesome work!

Why is strict mode disallowed in .eslintrc?

Strict mode is disallowed using the ESLint "never" setting:
https://github.com/gaearon/react-hot-boilerplate/blob/master/.eslintrc#L13

Why is this?

Add support for mocha-loader for testing?

Will this boilerplate add support for testing?

Consider setting `historyApiFallback: true` for WebpackDevServer

If you do this, the boilerplate will work with routers out of the box. Ie. you can access the app directly from routes, not just root.

Different structure not working?

I'm using a different structure in my apps where I render {this.props.children} in containers rather than passing it explicitly in which allows us to compose better with layouts such as

<Container>
   <HomePage />
</Container>

I've changed the example app to reflect our structure, but whenever I try to the Counter file, it doesn't update, and logs: The following modules couldn't be hot updated: (They would need a full reload!)

Is this a bug, or am I missing an important piece of the puzzle here?

Thanks in advance !

index.js

import { AppContainer } from 'react-hot-loader';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Counter from './Counter';

const rootEl = document.getElementById('root');
ReactDOM.render(
  <AppContainer>
    <App>
        <Counter />
    </App>
  </AppContainer>,
  rootEl
);

if (module.hot) {
  module.hot.accept('./App', () => {
    // If you use Webpack 2 in ES modules mode, you can
    // use <App /> here rather than require() a <NextApp />.
    const NextApp = require('./App').default;
    ReactDOM.render(
      <AppContainer>
         <NextApp>
             <Counter />
         </NextApp>
      </AppContainer>,
      rootEl
    );
  });
}

app.js

import React, { Component } from 'react';
import Layout from './Layout';
import Counter from './Counter';

// If you use React Router, make this component
// render <Router> with your routes. Currently,
// only synchronous routes are hot reloaded, and
// you will see a warning from <Router> on every reload.
// You can ignore this warning. For details, see:
// https://github.com/reactjs/react-router/issues/2182

export default class App extends Component {
  render() {
    return (
      <Layout>
          {this.props.children}
      </Layout>
    );
  }
}

counter.js

import React, { Component } from 'react';

export default class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }

  componentDidMount() {
    this.interval = setInterval(this.tick.bind(this), 1000);
  }

  tick() {
    this.setState({
      counter: this.state.counter + 1
    });
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <h2>Counter: {this.state.counter}</h2>
   );
  }
}

it seems not getting along with node 5.3.0

> npm run watch

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 silly lifecycle [email protected]~prestart: no script for prestart, continuing
7 info lifecycle [email protected]~start: [email protected]
8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\dev-js\react-isomorphic-starterkit\node_modules\.bin;C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\dev-js\react-isomorphic-starterkit\node_modules\.bin;C:\Program Files\ConEmu;C:\Program Files\ConEmu\ConEmu;D:\prg\adt-bundle-windows-x86_64-20140702\sdk\platform-tools;C:\Program Files\Java\jdk1.8.0_66\bin;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Windows Live\Shared;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Gow\bin;C:\Program Files\Git\cmd;C:\Program Files\TortoiseSVN\bin;C:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\VSShell\Common7\IDE\;C:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\;C:\Program Files\Microsoft SQL Server\100\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\100\DTS\Binn\;C:\Program Files\Microsoft SQL Server\100\DTS\Binn\;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;D:\prg\Tools;C:\Program Files\TortoiseGit\bin;C:\Program Files (x86)\Skype\Phone\;C:\Program Files\nodejs\;C:\Users\PhuHiep\.dnx\bin;C:\Ruby21\bin;C:\Ruby22-x64\bin;C:\Users\PhuHiep\AppData\Roaming\npm
10 verbose lifecycle [email protected]~start: CWD: D:\dev-js\react-isomorphic-starterkit
11 silly lifecycle [email protected]~start: Args: [ '/d /s /c',
11 silly lifecycle   'NODE_PATH="./src" node --harmony ./babel.server' ]
12 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: `NODE_PATH="./src" node --harmony ./babel.server`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:232:16)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at EventEmitter.emit (events.js:172:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at ChildProcess.emit (events.js:172:7)
14 verbose stack     at maybeClose (internal/child_process.js:818:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd D:\dev-js\react-isomorphic-starterkit
17 error Windows_NT 10.0.10586
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "start"
19 error node v5.3.0
20 error npm  v3.3.12
21 error code ELIFECYCLE
22 error [email protected] start: `NODE_PATH="./src" node --harmony ./babel.server`
22 error Exit status 1
23 error Failed at the [email protected] start script 'NODE_PATH="./src" node --harmony ./babel.server'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the react-isomorphic-starterkit package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     NODE_PATH="./src" node --harmony ./babel.server
23 error You can get their info via:
23 error     npm owner ls react-isomorphic-starterkit
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Build fails out of the box on Windows

I'm on Windows 10 x64 and can't get the boilerplate to run.

Error on master branch

on commit c7a808185b372a27dfe5758b340578c95922f74e

git clone [email protected]:gaearon/react-hot-boilerplate.git
cd react-hot-boilerplate
npm i
npm start

ERROR in multi main
Module not found: Error: Cannot resolve module 'react-hot-loader/patch' in D:\Work\OriginalOrCopy\react-hot-boilerplate
 @ multi main
ERROR in ./src/index.js
Module parse failed: D:\Work\OriginalOrCopy\react-hot-boilerplate\src\index.js Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:16)
    at Parser.pp.raise (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:920:13)
    at Parser.pp.unexpected (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:1483:8)
    at Parser.pp.parseExprAtom (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:330:12)
    at Parser.pp.parseExprSubscripts (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:225:19)
    at Parser.pp.parseMaybeUnary (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:204:17)
    at Parser.pp.parseExprOps (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:151:19)
    at Parser.pp.parseMaybeConditional (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:133:19)
    at Parser.pp.parseMaybeAssign (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:110:19)
    at Parser.pp.parseExprList (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:657:23)
    at Parser.pp.parseSubscripts (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:249:29)

(Full log here)

Same thing happens on version 3-alpha

on commit f134ff335d26f1b0369e65a9309b4ec1a38a2581

ERROR in multi main
Module not found: Error: Cannot resolve module 'react-hot-loader/patch' in D:\Work\OriginalOrCopy\react-hot-boilerplate
 @ multi main
ERROR in ./src/index.js
Module parse failed: D:\Work\OriginalOrCopy\react-hot-boilerplate\src\index.js Unexpected token (8:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (8:2)
    at Parser.pp.raise (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:920:13)
    at Parser.pp.unexpected (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:1483:8)
    at Parser.pp.parseExprAtom (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:330:12)
    at Parser.pp.parseExprSubscripts (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:225:19)
    at Parser.pp.parseMaybeUnary (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:204:17)
    at Parser.pp.parseExprOps (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:151:19)
    at Parser.pp.parseMaybeConditional (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:133:19)
    at Parser.pp.parseMaybeAssign (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:110:19)
    at Parser.pp.parseExprList (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:657:23)
    at Parser.pp.parseSubscripts (C:\d\Work\OriginalOrCopy\react-hot-boilerplate\node_modules\webpack\node_modules\acorn\dist\acorn.js:249:29)

Full log here

how can i using 0.0.0.0 as host.

i may using 0.0.0.0 as host , how i can do? thx so much!

ref
Using 0.0.0.0 as Host

You may want to change the host in server.js and webpack.config.js from localhost to 0.0.0.0 to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM.

Can't get the boilerplate code to npm-start

Hi,

wasn't sure where else to post, but I tried to make a hello world app with hot-module-loader, which wasn't working and then just decided to check this out of the repository to see whether it was my code that was the problem.

npm install fine, then npm start and I get this error. I get this same error in my hello world app:

C:\Users\Vasia\WebstormProjects\react-hot-boilerplate>npm install

C:\Users\Vasia\WebstormProjects\react-hot-boilerplate>npm start

[email protected] start C:\Users\Vasia\WebstormProjects\react-hot-boilerplate
node server.js

module.js:340
throw err;
^
Error: Cannot find module 'tapable'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (C:\Users\Vasia\WebstormProjects\react-hot-boilerplate\node_modules\webpack\lib\Compiler.js:6:15)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)

npm ERR! [email protected] start: node server.js
npm ERR! Exit status 8
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is most likely a problem with the react-hot-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node server.js
npm ERR! You can get their info via:
npm ERR! npm owner ls react-hot-boilerplate
npm ERR! There is likely additional logging output above.
npm ERR! System Windows_NT 6.2.9200
npm ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! cwd C:\Users\Vasia\WebstormProjects\react-hot-boilerplate
npm ERR! node -v v0.10.36
npm ERR! npm -v 1.4.28
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! C:\Users\Vasia\WebstormProjects\react-hot-boilerplate\npm-debug.log
npm ERR! not ok code 0

Any help is much appreciated.

PS I'm running windows 8.1 but looking at your closed issues that shouldn't be a problem

Thanks,
Vasia

Nothing happens when I edit App.js

I cloned a clean repo of this boilerplate and am able to build the "Hello World" app. I am getting a log in the console that says “[WDS] Hot Module Replacement enabled” but editting my App.js does not trigger a page reload. I looked at this part of the troubleshooting guide but nothing seemed to work. I am running npm v2.15.1 and node v0.12.15 in Ubuntu 16.04.

[Proposal] Change devtool from eval to eval-source-map

Hello,

I've been using this boilerplate to create toy projects to explore tools and each time I find myself fixing up the devtool option for webpack so that I can debug my own source code in Chrome.

I assume many people are also including the source-map option, mainly because most of the issues opened here with webpack configurations seem to have it set.

I would be more than happy to create a pull request for this.

Cheers,

Can

ES6 and ES7 harmony flag by default

Use NoErrorsPlugin and hot/only-dev-server to eliminate page reloads

Hot loader is awesomer when used with NoErrorsPlugin and hot/only-dev-server since it eliminates page reloads altogether and recovers after syntax errors.

Need to change configs to reflect that.

Use webpack-dev-middleware?

It’s got a nice syntax error overlay, and it was already fixed to work with Webpack 2.
We should probably use it here as well.

Not building on fresh clone

Just tried this steps (trying to reproduce a different issue and were gonna check if it's my computer/network) and it's failing when building.

git clone https://github.com/gaearon/react-hot-boilerplate.git
cd react-hot-boilerplate
npm install
npm start

Output Error:

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token )
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/victor/Projects/react-hot-boilerplate/node_modules/babel-preset-es2015/node_modules/babel-plugin-transform-es2015-modules-commonjs/node_modules/babel-template/lib/index.js:74:46)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
 @ multi main
webpack: bundle is now VALID.

Full output:

➜  react-hot-boilerplate git:(master) npm start

> [email protected] start /Users/victor/Projects/react-hot-boilerplate
> node server.js

Listening at http://localhost:3000/
Hash: 3f8b8aa84df424c78b60
Version: webpack 1.13.0
Time: 1989ms
    Asset    Size  Chunks             Chunk Names
bundle.js  278 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 217 kB [rendered]
    [0] multi main 52 bytes {0} [built] [1 error]
    [1] (webpack)-dev-server/client?http://localhost:3000 2.67 kB {0} [built]
    [2] (webpack)/~/node-libs-browser/~/url/url.js 22.3 kB {0} [built]
    [3] (webpack)/~/node-libs-browser/~/url/~/punycode/punycode.js 14.6 kB {0} [built]
    [4] (webpack)/buildin/module.js 251 bytes {0} [built]
    [5] (webpack)/~/node-libs-browser/~/url/~/querystring/index.js 127 bytes {0} [built]
    [6] (webpack)/~/node-libs-browser/~/url/~/querystring/decode.js 2.4 kB {0} [built]
    [7] (webpack)/~/node-libs-browser/~/url/~/querystring/encode.js 2.09 kB {0} [built]
    [8] (webpack)-dev-server/~/sockjs-client/lib/entry.js 244 bytes {0} [built]
    [9] (webpack)-dev-server/~/sockjs-client/lib/transport-list.js 613 bytes {0} [built]
   [10] (webpack)-dev-server/~/sockjs-client/lib/transport/websocket.js 2.72 kB {0} [built]
   [11] (webpack)/~/node-libs-browser/~/process/browser.js 2.12 kB {0} [built]
   [12] (webpack)-dev-server/~/sockjs-client/lib/utils/event.js 2 kB {0} [built]
   [13] (webpack)-dev-server/~/sockjs-client/lib/utils/random.js 746 bytes {0} [built]
   [14] (webpack)-dev-server/~/sockjs-client/lib/utils/browser-crypto.js 438 bytes {0} [built]
   [15] (webpack)-dev-server/~/sockjs-client/lib/utils/url.js 975 bytes {0} [built]
   [16] (webpack)-dev-server/~/sockjs-client/~/url-parse/index.js 8.09 kB {0} [built]
   [17] (webpack)-dev-server/~/sockjs-client/~/url-parse/~/requires-port/index.js 753 bytes {0} [built]
   [18] (webpack)-dev-server/~/sockjs-client/~/url-parse/lolcation.js 1.58 kB {0} [built]
   [19] (webpack)-dev-server/~/sockjs-client/~/url-parse/~/querystringify/index.js 1.3 kB {0} [built]
   [20] (webpack)-dev-server/~/sockjs-client/~/debug/browser.js 3.76 kB {0} [built]
   [21] (webpack)-dev-server/~/sockjs-client/~/debug/debug.js 4.1 kB {0} [built]
   [22] (webpack)-dev-server/~/sockjs-client/~/debug/~/ms/index.js 2.33 kB {0} [built]
   [23] (webpack)-dev-server/~/sockjs-client/~/inherits/inherits_browser.js 672 bytes {0} [built]
   [24] (webpack)-dev-server/~/sockjs-client/lib/event/emitter.js 1.27 kB {0} [built]
   [25] (webpack)-dev-server/~/sockjs-client/lib/event/eventtarget.js 1.85 kB {0} [built]
   [26] (webpack)-dev-server/~/sockjs-client/lib/transport/browser/websocket.js 58 bytes {0} [built]
   [27] (webpack)-dev-server/~/sockjs-client/lib/transport/xhr-streaming.js 1.25 kB {0} [built]
   [28] (webpack)-dev-server/~/sockjs-client/lib/transport/lib/ajax-based.js 1.31 kB {0} [built]
   [29] (webpack)-dev-server/~/sockjs-client/lib/transport/lib/sender-receiver.js 1.15 kB {0} [built]
   [30] (webpack)-dev-server/~/sockjs-client/lib/transport/lib/buffered-sender.js 2.3 kB {0} [built]
   [31] (webpack)-dev-server/~/sockjs-client/lib/transport/lib/polling.js 1.32 kB {0} [built]
   [32] (webpack)-dev-server/~/sockjs-client/lib/transport/receiver/xhr.js 1.58 kB {0} [built]
   [33] (webpack)-dev-server/~/sockjs-client/lib/transport/sender/xhr-cors.js 343 bytes {0} [built]
   [34] (webpack)-dev-server/~/sockjs-client/lib/transport/browser/abstract-xhr.js 4.8 kB {0} [built]
   [35] (webpack)-dev-server/~/sockjs-client/lib/transport/sender/xhr-local.js 352 bytes {0} [built]
   [36] (webpack)-dev-server/~/sockjs-client/lib/utils/browser.js 560 bytes {0} [built]
   [37] (webpack)-dev-server/~/sockjs-client/lib/transport/xdr-streaming.js 984 bytes {0} [built]
   [38] (webpack)-dev-server/~/sockjs-client/lib/transport/sender/xdr.js 2.46 kB {0} [built]
   [39] (webpack)-dev-server/~/sockjs-client/lib/transport/eventsource.js 766 bytes {0} [built]
   [40] (webpack)-dev-server/~/sockjs-client/lib/transport/receiver/eventsource.js 1.58 kB {0} [built]
   [41] (webpack)-dev-server/~/sockjs-client/lib/transport/browser/eventsource.js 37 bytes {0} [built]
   [42] (webpack)-dev-server/~/sockjs-client/lib/transport/lib/iframe-wrap.js 981 bytes {0} [built]
   [43] (webpack)-dev-server/~/sockjs-client/lib/transport/iframe.js 3.83 kB {0} [built]
   [44] (webpack)-dev-server/~/sockjs-client/~/json3/lib/json3.js 43.3 kB {0} [built]
   [45] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
   [46] (webpack)-dev-server/~/sockjs-client/lib/version.js 26 bytes {0} [built]
   [47] (webpack)-dev-server/~/sockjs-client/lib/utils/iframe.js 5.06 kB {0} [built]
   [48] (webpack)-dev-server/~/sockjs-client/lib/utils/object.js 532 bytes {0} [built]
   [49] (webpack)-dev-server/~/sockjs-client/lib/transport/htmlfile.js 710 bytes {0} [built]
   [50] (webpack)-dev-server/~/sockjs-client/lib/transport/receiver/htmlfile.js 2.2 kB {0} [built]
   [51] (webpack)-dev-server/~/sockjs-client/lib/transport/xhr-polling.js 894 bytes {0} [built]
   [52] (webpack)-dev-server/~/sockjs-client/lib/transport/xdr-polling.js 712 bytes {0} [built]
   [53] (webpack)-dev-server/~/sockjs-client/lib/transport/jsonp-polling.js 1.02 kB {0} [built]
   [54] (webpack)-dev-server/~/sockjs-client/lib/transport/receiver/jsonp.js 5.57 kB {0} [built]
   [55] (webpack)-dev-server/~/sockjs-client/lib/transport/sender/jsonp.js 2.46 kB {0} [built]
   [56] (webpack)-dev-server/~/sockjs-client/lib/main.js 11.9 kB {0} [built]
   [57] (webpack)-dev-server/~/sockjs-client/lib/shims.js 18.2 kB {0} [built]
   [58] (webpack)-dev-server/~/sockjs-client/lib/utils/escape.js 2.31 kB {0} [built]
   [59] (webpack)-dev-server/~/sockjs-client/lib/utils/transport.js 1.35 kB {0} [built]
   [60] (webpack)-dev-server/~/sockjs-client/lib/utils/log.js 450 bytes {0} [built]
   [61] (webpack)-dev-server/~/sockjs-client/lib/event/event.js 477 bytes {0} [built]
   [62] (webpack)-dev-server/~/sockjs-client/lib/location.js 177 bytes {0} [built]
   [63] (webpack)-dev-server/~/sockjs-client/lib/event/close.js 295 bytes {0} [built]
   [64] (webpack)-dev-server/~/sockjs-client/lib/event/trans-message.js 292 bytes {0} [built]
   [65] (webpack)-dev-server/~/sockjs-client/lib/info-receiver.js 2.22 kB {0} [built]
   [66] (webpack)-dev-server/~/sockjs-client/lib/transport/sender/xhr-fake.js 456 bytes {0} [built]
   [67] (webpack)-dev-server/~/sockjs-client/lib/info-iframe.js 1.52 kB {0} [built]
   [68] (webpack)-dev-server/~/sockjs-client/lib/info-iframe-receiver.js 791 bytes {0} [built]
   [69] (webpack)-dev-server/~/sockjs-client/lib/info-ajax.js 1.03 kB {0} [built]
   [70] (webpack)-dev-server/~/sockjs-client/lib/iframe-bootstrap.js 2.9 kB {0} [built]
   [71] (webpack)-dev-server/~/sockjs-client/lib/facade.js 723 bytes {0} [built]
   [72] (webpack)-dev-server/~/strip-ansi/index.js 161 bytes {0} [built]
   [73] (webpack)-dev-server/~/strip-ansi/~/ansi-regex/index.js 135 bytes {0} [built]
   [74] (webpack)/hot/only-dev-server.js 2.25 kB {0} [built]
   [75] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token )
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/victor/Projects/react-hot-boilerplate/node_modules/babel-preset-es2015/node_modules/babel-plugin-transform-es2015-modules-commonjs/node_modules/babel-template/lib/index.js:74:46)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
 @ multi main
webpack: bundle is now VALID.

npm version output:

➜  react-hot-boilerplate git:(master) npm version
{ 'react-hot-boilerplate': '1.0.0',
  npm: '3.8.6',
  ares: '1.10.1-DEV',
  http_parser: '2.7.0',
  icu: '56.1',
  modules: '47',
  node: '5.11.1',
  openssl: '1.0.2h',
  uv: '1.8.0',
  v8: '4.6.85.31',
  zlib: '1.2.8' }

I'm on commit c7a8081

How to add scss to this project?

What is the right way to add scss to this project? Thank you so much! :)

Not working with the latest packages

    "react-hot-loader": "^1.2.4",
    "webpack": "^1.8.2",
    "webpack-dev-server": "^1.8.0"

Changing state variables doesn't get reflected in react-hot-loading for me.

I have a jsx file contaning a state variable msg: 'Some text'. I enabled react-hot-loader in my project, any changes in the render method are rendered but not for any change in the state which is in the constructor.