CODEWITHSUNDEEP
reactjswebpackreact-router-redux
Morphex
Morphex

Reputation: 306

React Hot Reload 3

So I have been trying to use React Hot Reload 3 - - to activate hot reload in my project, and I have been getting a error currently with React-Router

[react-router] You cannot change ; it will be ignored

that and the fact that the Hot Reload does not work at all.

this is my WebpackConfig:

'use strict';

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',
  'react-hot-loader/patch',
  './Root/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist'
  },
  plugins: [
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
  new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') })
  ],
  resolve: {
    alias: {
      'redux-devtools/lib': path.join(__dirname, '..', '..', 'src'),
      'redux-devtools': path.join(__dirname, '..', '..', 'src'),
      'react': path.join(__dirname, 'node_modules', 'react')
    },
    root: [
    path.resolve('./Root'),path.resolve('./Root/Source')
    ],
    modulesDirectories: [
    'node_modules'
    ],

    extensions: ['', '.js']
  },
  resolveLoader: {
    'fallback': path.join(__dirname, 'node_modules')
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel'],
      exclude: /node_modules/,
      include: __dirname
    }, {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, '..', '..', 'src')
    },
    {
      test: /\.json?$/,
      loader: 'json'
    },
    {
      test: /\.css?$/,
      loaders: ['style', 'raw'],
      include: __dirname
    },
    {
      test: /\.(jpe?g|png|gif|svg)$/,
      loader: 'url',
      query: { limit: 10240 }
    }
    ]
  }
};

this is my Babel.rc

    {
  "presets": ["es2015-loose", "stage-0", "react"],
  "plugins": ["react-hot-loader/babel"]
}

and finally my Index.js (Entry)

/// <reference path='../typings/browser.d.ts'/> 
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import {syncHistoryWithStore} from 'react-router-redux';
import  {browserHistory } from 'react-router';
import Root from './Root';


import configureStore from './Source/Actions/configureStore';
import './Content/common.css'


const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store);

import "react-big-calendar/lib/css/react-big-calendar.css"
import BigCalendar from 'react-big-calendar';
import moment from 'moment';


moment.locale("pt-pt");
BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment) );

ReactDOM.render(
 <AppContainer   >
 <Root store={store} history = {history}/> 
 </AppContainer>,
 document.getElementById('root')
 );


if (module.hot) {
  module.hot.accept('./Root', () => {
    ReactDOM.render(
     <AppContainer   >
     <Root store={store} history = {history}/> 
     </AppContainer>,
     document.getElementById('root')
     );
  });
}

So how would I actually configure my current project to actually hot reload the components while I am editting the code?

Upvotes: 1

Views: 345

Answers (1)

locropulenton
locropulenton

Reputation: 4853

Follow instructions here: https://webpack.github.io/docs/hot-module-replacement.html

In your code replace es2015-loose with es2015 because that es2015-loose preset is obsolete.

Try calling module.hot.accept();.

If you want to hot-reload your reducer you should follow instructions detailed here: https://github.com/reactjs/react-redux/releases/tag/v2.0.0

Remember adding -loader after your babel-loaders.

I have created an starter kit to be taken as a working example:

https://github.com/agrcrobles/react-native-web-webpack-starter

Upvotes: 1

Related Questions