I have some files Typescrypt->ES6->React JSX (ES6)->Webpack (with react-hot and babel), react-hot does not refresh page
One is some sort of code behide PersonDetailsComponent.cb.js (compiled from TypeScript)
import * as React from "react/addons";
export default class PersonDetailsComponent_CB extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
}
//other code
render() {
//return React.jsx(`<div>test</div>`);
//return React.DOM.div(null, this.props.name + " is a " + this.props.role);
return null;
}
}
Then PersonDetailsComponent.jsx (because TypeScript compiler can't parse JSX)
import * as React from "react/addons";
import {default as PersonDetailsComponent_CB} from "../tmp/PersonDetailsComponent.cb.js";
class PersonDetailsComponent extends PersonDetailsComponent_CB {
constructor(props) {
super(props);
}
//only render
render() {
let a = 1;
return(
<div>
{this.props.name} is {this.props.role}
</div>
);
}
}
export default function Factory(props) {
"use strict";
return React.createElement(PersonDetailsComponent, props);
}
Then index.js chunk
import {default as PersonDetailsComponent} from "./PersonDetailsComponent.jsx";
React.render(PersonDetailsComponent(
{name: "Bob",
role: "mmm"}),
document.body);
All is OK, but react-hot does not refresh page then I edit and save jsx file. For jsx files in ES5 format all is updating. I'm using webpack and react-hot and babel
gulp.task('react:development', function() {
var wconfig = {
cache: true,
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://'+whost+':'+wport,
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: process.cwd(),
//contentBase: 'http://'+whost+':'+wport,
filename: 'bundle.js',
publicPath: 'http://'+whost+':'+wport+'/dist/'
},
plugins: [
new dwebpack.HotModuleReplacementPlugin(),
new dwebpack.NoErrorsPlugin()
],
module: {
loaders: [
{ test: /\.js$/, loaders: ['react-hot', 'jsx?harmony!babel', 'babel-loader'], exclude: /node_modules/ },
{ test: /\.jsx$/, loaders: ['react-hot', 'jsx?harmony!babel', 'babel-loader'], exclude: /node_modules/ },
{ test: /\.css$/, loader: "style!css" }
]
}
};
var server = new WebpackDevServer(dwebpack(wconfig), {
publicPath: wconfig.output.publicPath,
hot: true,
stats: {
colors: true,
progress: true
}
});
server.listen(wport, function (err, result) {
if (err) {
console.log(err);
}
gutil.log('Webpack Dev Server started. Compiling...');
});
});
Anybody know this problem?
Have you activated the mode client-side ? I'm using
if (module.hot) {
module.hot.accept();
}
on the very first client-side file that's been called
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.