ReactHotLoader входит в бесконечный цикл?

Question

[EpicUsaMan]

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


const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root')
  );
};

render(App);

if (module.hot) {
  module.hot.accept('./components/App.jsx', () => { render(App) });
}

При переходе на страницу её невозможно закрыть, отображается только белое пространство, в консоли ошибок нету, а в DOM древе пусто.

Но если убрать это -- все прекрасно рендерится.
import 'react-hot-loader/patch';

Но получаю следующую ошибку и собственно Hot Loader не работает:

AppContainer.dev.js?ce78:37 React Hot Loader: It appears that "react-hot-loader/patch" did not run immediately before the app started. Make sure that it runs before any other code. For example, if you use Webpack, you can add "react-hot-loader/patch" as the very first item to the "entry" array in its config. Alternatively, you can add require("react-hot-loader/patch") as the very first line in the application code, before any other imports.

Comments

[Антон Спирин]

Что у вас в webpack.config.js?

[EpicUsaMan]

Антон Спирин,

const path = require('path'),
  webpack = require('webpack'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  WriteFilePlugin = require('write-file-webpack-plugin');

var plugins, cssloaders, jsloaders, mainjs, entry;

if (process.env.NODE_ENV === 'development') {
  plugins = [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      children: true, // necessary for splitting children chunks 
      async: true // necessary for async loading chunks 
    }),
    new WriteFilePlugin({})
  ];
  
  mainjs = [
    //'react-hot-loader/patch',
    'webpack-hot-middleware/client',
    './src/index.js'
  ];
  
  entry = {
    'main.js': mainjs
  };

  cssloaders = ['css-loader', 'ruby-sass-loader?outputStyle=compressed&compass=true&cwd=' + path.resolve(__dirname, './'), {
      loader: 'sass-resources-loader',
      options: {
          resources: path.resolve(__dirname, './src/scss/index.scss')
      }
  }];

  jsloaders = ['react-hot-loader/webpack', 'babel-loader'];
} else {
  plugins = [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      children: true, // necessary for splitting children chunks 
      async: true // necessary for async loading chunks 
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new ExtractTextPlugin({
      filename: 'style.css',
      allChunks: true
    })
  ];
  
  mainjs = './src/index.js';
  
  entry = {
    'main.js': mainjs,
    'style.css': './src/scss/index.scss'
  }; 

  cssloaders = ExtractTextPlugin.extract({
    use: [{
      loader: 'css-loader',
      options: {
        minimize: true
      }
    }, {
      loader: 'ruby-sass-loader?outputStyle=compressed&compass=true&cwd=' + path.resolve(__dirname, './')
    }, {
      loader: 'sass-resources-loader',
      options: {
          resources: path.resolve(__dirname, './src/scss/index.scss')
      }
    }]
  });

  jsloaders = ['babel-loader'];
}

module.exports = {
  devtool: process.env.NODE_ENV === 'production' ? false : 'cheap-module-eval-source-map',
  entry: entry,
  resolve: {
    alias: {
      react: 'preact-compat',
      'react-dom': 'preact-compat',
      "preact-compat": "preact-compat/dist/preact-compat"
    }
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]',
    publicPath: '/dist/',
    hotUpdateChunkFilename: 'hot/hot-update.js',
    hotUpdateMainFilename: 'hot/hot-update.json',
    chunkFilename: '[id].js'
  },
  plugins: plugins,
  module: {
    loaders: [{
        test: /\.(scss|sass|css)$/,
        loaders: cssloaders
    }, {
        test: /\.jsx?$/,
        loaders: jsloaders,
        include: path.join(__dirname, 'src')
    },
      {
        test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
        loader: 'file-loader'
    }]
  }
};

Закомментированная строка в entry, ибо результат тот же, что и с import. Подумал что с import будет нагляднее.

[Антон Спирин]

EpicUsaMan, нет патч должен быть в entry, так как в prod режиме он не нужен.
Видимо проблема с webpack-hot-middleware/client
Посмотрите как тут сделано https://github.com/gaearon/react-hot-boilerplate/b...
там добавлен адрес и порт.
Я в своем проекте middleware не добавлял, а dev сервер в cli с параметрами запускал

webpack-dev-server --hot --history-api-fallback --open

[EpicUsaMan]

Антон Спирин, проблема оказалось в preact-е, где-то в одном из последних выпусков они потеряли совместимость.