I'm trying to use hot-react-loader in my project. So I changed some files to work with this but I get an error when I edit a component.
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
[HMR] Cannot apply update. Need to do a full reload!
what am I doing wrong?
webpack.config.dev.js
var webpack = require('webpack'); var path = require('path'); // Questo il plugin di webpack che mi genera il file index.html in dist var HtmlwebpackPlugin = require('html-webpack-plugin'); const PATHS = { app: path.join(__dirname, 'app/index'), build: path.join(__dirname, 'dist') }; module.exports = { devtool: 'eval', entry: [ 'webpack-dev-server/client?http://localhost:3500', 'webpack/hot/only-dev-server', 'react-hot-loader/patch', PATHS.app ], output: { path: PATHS.build, filename: 'js/bundle.js' }, // Questo serve a non specificare le estensioni resolve: { extensions: ['', '.js'] }, module: { loaders: [ { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\.(png|jpg)$/, loader: "file?limit=1000&name=images/[hash].[ext]" }, { test: /\.scss$/, loaders: [ 'style','css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ] } ] }, // Porta utilizzata da webpack-dev-server devServer: { port: 3500 }, plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlwebpackPlugin({ title: 'React Starter Kit', hash: true, inject: false, appMountId: 'app', template: 'jade!./app/assets/index.jade' }) ] }; server.js
var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config.dev'); new WebpackDevServer(webpack(config), { hot: true, historyApiFallback: true, stats: { colors: true } }).listen(3500, 'localhost', function (err) { if (err) { console.log(err); } console.log('Listening at localhost:3500'); }); index.js
import ReactDOM from 'react-dom'; import React from 'react'; import App from './app'; import { AppContainer } from 'react-hot-loader'; const root = document.getElementById('app'); ReactDOM.render( <AppContainer> <App /> </AppContainer> , root); if (module.hot) { module.hot.accept('./app', () => { const App = require('./app'); ReactDOM.render( <AppContainer> <App /> </AppContainer> , root); }); } app.js
import React from 'react'; import { Router, browserHistory } from 'react-router'; import routes from './routes/routes'; const App = () => ( <Router history={browserHistory} routes={routes} /> ); export default App;