Webpack Hot Modul Reloader funktioniert nicht mit React Stateless Component

Question

Ich habe ein wenig Probleme mit Webpack-Dev-Middleware nicht heiß wiederladen mit einer statuslosen Funktion reagieren, aber funktioniert gut, wenn ich eine Klasse erweitern Komponente erstellen.

Zum Beispiel, das funktioniert perfekt.

Dies jedoch kläglich scheitert.

// home.js 

import React from 'react' 

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

Fehler:

[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

Wenn es immer noch relevant ist und die Menschen haben Probleme noch, gibt es eine Möglichkeit, mit der Version 3, die noch in dev ist. Ich werde hier mein Setup für package.json einfügen und die webpack.config.js Dateien, aber wenn Sie ein funktionierendes Beispiel 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 
    } 
}; 

Sie können das Repo verwenden, das ich als Boilerplate erstellt habe, und die Version des Reac-Hotloaders aktualisieren, wenn die Produktion beginnt. Prost.