Webpack Hot Module ReloaderがReact Statelessコンポーネントで動作しない

Question

webpack-dev-middlewareに問題がありますが、反応なしステートレス関数を使用してホットリロードするのではなく、クラス拡張コンポーネントを作成するとうまく動作します。

たとえば、これは完全に機能します。

// home.js 

import React from 'react' 

export default class Home extends React.Component { 
    render() { 
    return (
      <div> 
       <h1>Drop it like it's hot</h1> 
      </div> 
     ) 
    } 
} 

しかし、これは悲惨に失敗します。

// home.js 

import React from 'react' 

export default function Home() { 
    return (
     <div> 
      <h1>Hello World</h1> 
     </div> 
    ) 
} 

エラー：それはまだ関連していると人々はまだ問題がある場合は

[Warning] [HMR] The following modules couldn't be hot updated: (Full reload needed) (bundle.js, line 1742) 
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details. 
[Warning] [HMR] - ./client/components/home.js (bundle.js, line 1750) 

Answer 1

、方法がDEVにまだあるバージョン3で、そこにあります。私はここでpackage.jsonとwebpack.config.jsファイルのための私のセットアップを貼り付けていますが作業の例をしたい場合here is the repo I created for this

package.json

{ 
    "name": "favesound-project", 
    "version": "1.0.0", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "webpack-dev-server --progress --colors --hot --config ./webpack.config.js" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.0.20", 
    "babel-loader": "^6.0.1", 
    "babel-preset-es2015": "^6.0.15", 
    "babel-preset-react": "^6.0.15", 
    "babel-preset-stage-0": "^6.0.15", 
    "chai": "^3.5.0", 
    "enzyme": "^2.3.0", 
    "exports-loader": "^0.6.3", 
    "imports-loader": "^0.6.5", 
    "jsdom": "^9.2.1", 
    "mocha": "^2.5.3", 
    "react-addons-test-utils": "^15.1.0", 
    "react-hot-loader": "^3.0.0-beta.0", 
    "webpack": "^1.12.2", 
    "webpack-dev-server": "^1.12.1" 
    }, 
    "dependencies": { 
    "react": "^15.1.0", 
    "react-dom": "^15.1.0", 
    "react-redux": "^4.4.5", 
    "react-router": "^2.4.1", 
    "react-router-redux": "^4.0.5", 
    "redux": "^3.5.2", 
    "redux-logger": "^2.6.1", 
    "redux-thunk": "^2.1.0", 
    "soundcloud": "^3.1.2", 
    "whatwg-fetch": "^1.0.0" 
    }, 
    "author": "", 
    "license": "ISC", 
    "keywords": [], 
    "description": "" 
} 

webpack.config.js

const webpack = require('webpack'); 

module.exports = { 
    entry: [ 
     'react-hot-loader/patch', 
     'webpack-dev-server/client?http://localhost:8080', 
     'webpack/hot/only-dev-server', 
     './src/index.js' 
    ], 
    module: { 
     loaders: [{ 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loaders: ['babel'] 
     }] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    output: { 
     path: __dirname + '/dist', 
     publicPath: '/', 
     filename: 'bundle.js' 
    }, 
    devServer: { 
     contentBase: './dist', 
     hot: true 
    } 
}; 

ます

ボイラープレートとして作成したrepo iを使用して、製造時に反応ホットローダーのバージョンをアップグレードすることができます。乾杯。