Commit
- Loading branch information
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| { | ||
| "presets": ["es2015-loose", "stage-0", "react"], | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong. |
||
| "plugins": ["react-hot-loader/babel"] | ||
This comment has been minimized.
Sorry, something went wrong. 
mgcrea
|
||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,28 @@ | ||
| import 'todomvc-app-css/index.css'; | ||
| import React from 'react'; | ||
| import { render } from 'react-dom'; | ||
| import { AppContainer } from 'react-hot-loader'; | ||
This comment has been minimized.
Sorry, something went wrong. 
ericclemmons
|
||
| import configureStore from './store/configureStore'; | ||
| import Root from './containers/Root'; | ||
|
|
||
| const store = configureStore(); | ||
|
|
||
| render( | ||
| <AppContainer | ||
This comment has been minimized.
Sorry, something went wrong. 
gaearon
Author
Contributor
|
||
| component={Root} | ||
| props={{ store }} | ||
| />, | ||
| document.getElementById('root') | ||
| ); | ||
|
|
||
| if (module.hot) { | ||
This comment has been minimized.
Sorry, something went wrong. |
||
| module.hot.accept('./containers/Root', () => { | ||
This comment has been minimized.
Sorry, something went wrong.
gaearon
Author
Contributor
|
||
| render( | ||
| <AppContainer | ||
| component={require('./containers/Root').default} | ||
This comment has been minimized.
Sorry, something went wrong. 
littlebee
|
||
| props={{ store }} | ||
| />, | ||
| document.getElementById('root') | ||
| ); | ||
| }); | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -29,8 +29,8 @@ | |
| "homepage": "https://github.com/gaearon/redux-devtools#readme", | ||
| "dependencies": { | ||
| "classnames": "^2.1.2", | ||
| "react": "^15.0.1", | ||
| "react-dom": "^15.0.1", | ||
| "react-redux": "^4.1.0", | ||
| "redux": "^3.1.1" | ||
| }, | ||
|
|
@@ -43,10 +43,10 @@ | |
| "babel-preset-stage-0": "^6.3.13", | ||
| "node-libs-browser": "^0.5.2", | ||
| "raw-loader": "^0.5.1", | ||
| "react-hot-loader": "^3.0.0-alpha.8", | ||
This comment has been minimized.
Sorry, something went wrong. 
evenchange4
Contributor
|
||
| "redux-devtools": "^3.0.1", | ||
| "redux-devtools-dock-monitor": "^1.0.1", | ||
| "redux-devtools-log-monitor": "^1.0.2", | ||
| "style-loader": "^0.12.3", | ||
| "todomvc-app-css": "^2.0.1", | ||
| "webpack": "^1.9.11", | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,6 +6,7 @@ module.exports = { | |
| entry: [ | ||
| 'webpack-dev-server/client?http://localhost:3000', | ||
| 'webpack/hot/only-dev-server', | ||
| 'react-hot-loader/patch', | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong. 
artivilla
|
||
| './index' | ||
| ], | ||
| output: { | ||
|
|
@@ -30,12 +31,12 @@ module.exports = { | |
| module: { | ||
| loaders: [{ | ||
| test: /\.js$/, | ||
This comment has been minimized.
Sorry, something went wrong.
gaearon
Author
Contributor
|
||
| loaders: ['babel'], | ||
This comment has been minimized.
Sorry, something went wrong. 
benjamine
|
||
| exclude: /node_modules/, | ||
| include: __dirname | ||
| }, { | ||
| test: /\.js$/, | ||
| loaders: ['babel'], | ||
| include: path.join(__dirname, '..', '..', 'src') | ||
| }, { | ||
| test: /\.css?$/, | ||
|
|
||
8 comments
on commit 64f58b7
There was a problem hiding this comment.
Note that the main discussion is in gaearon/react-hot-boilerplate#61.
See also temporary workaround to get this working with React Router. works now out of the box
There was a problem hiding this comment.
Just to add to @gaearon's comment, it works out of the box w/ React Router after 3.0.0-alpha.12. The warning is still present but it can be ignored. More on the main thread: gaearon/react-hot-boilerplate#61 (comment)
There was a problem hiding this comment.
@gaearon I've got an app setup like this:
3.0.0-beta.2- Babe@^5
- Components export ES6 modules
- No
react-hotin the loaders - I have the 3 additional dev server entries in place, before my actual entry in the array.
The issue is for some reason I can't seem to hot load and keep the internal state of a component when editing it.
The console in Chrome show's that hot loading is enabled and I see the updates happen with the module ids.
Here are the files in question:
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('root');
ReactDOM.render((
<AppContainer
component={App}
/>
), root);
if (module.hot) {
module.hot.accept('./App', () => {
const App = require('./App');
ReactDOM.render((
<AppContainer
component={App}
/>
), root);
});
}BaseComponent.js:
import React, { Component } from 'react';
function propsEqual(val1, val2) {
if (val1 === val2) {
return true;
}
if (
!(val1 instanceof Object) || !(val2 instanceof Object)
) {
return false;
}
let eq = true;
for (let k in val1) {
const prop1 = val1[k];
if (val2.hasOwnProperty(k)) {
const prop2 = val2[k];
eq = prop1 === prop2;
} else {
eq = prop1 === undefined;
}
if (!eq) {
return false;
}
}
for (let l in val2) {
const prop2 = val2[l];
if (!val1.hasOwnProperty(l)) {
eq = prop2 === undefined;
}
if (!eq) {
return false;
}
}
return true;
}
export default class BaseComp extends Component {
constructor() {
super();
}
shouldComponentUpdate(nextProps, nextState) {
return (
!propsEqual(this.props, nextProps) || !propsEqual(this.state, nextState)
);
}
}App.js:
import React from 'react';
import BaseComponent from '../Base/BaseComponent';
import Input from './Input';
export default class App extends BaseComponent {
constructor() {
super();
}
state = {
heading: 'TEST APP'
};
render() {
const { heading } = this.state;
return (
<h1>
{heading}
<br />
<Input />
</h1>
);
}
}Input.js:
import React, { PropTypes } from 'react';
import BaseComponent from '../Base/BaseComponent';
export default class Input extends BaseComponent {
constructor() {
super();
this.onTextChange = ::this.onTextChange;
}
state = {
value: ''
};
onTextChange(event) {
const { value } = event.target;
this.setState({ value });
}
render() {
const { value } = this.state;
return (
<input
style={{width: '250px'}}
type='text'
value={value}
onChange={this.onTextChange}
/>
);
}
}So if I enter text in the <input /> in Input and then edit the width here: style={{width: '250px'}}, when I save and the new code loads, I lose the text I entered into the input.
Am I crazy? Should this work? Does it only work with some sort of global store (flux/redux)?
Please help me out if you can :)
There was a problem hiding this comment.
@gaearon Ok, I've narrowed my problem to having not included the babel plugin, but when I do I get the following error:
Module build failed: TypeError: The plugin "react-hot-loader/babel" didn't export a Plugin instance at PluginManager.validate
There was a problem hiding this comment.
can you provide an example using redux and router?... I got some errors and don't know why...
warning.js:44 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). Check the render method of AppContainer.warning @ warning.js:44createElement @ ReactElementValidator.js:166patchedCreateElement @ patch.dev.js:164render @ AppContainer.dev.js:67_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:832_renderValidatedComponent @ ReactCompositeComponent.js:859performInitialMount @ ReactCompositeComponent.js:383performInitialMountWithErrorHandling @ ReactCompositeComponent.js:355mountComponent @ ReactCompositeComponent.js:260mountComponent @ ReactReconciler.js:47performInitialMount @ ReactCompositeComponent.js:397mountComponent @ ReactCompositeComponent.js:262mountComponent @ ReactReconciler.js:47mountComponentIntoNode @ ReactMount.js:105perform @ Transaction.js:138batchedMountComponentIntoNode @ ReactMount.js:126perform @ Transaction.js:138batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98_renderNewRootComponent @ ReactMount.js:285_renderSubtreeIntoContainer @ ReactMount.js:371render @ ReactMount.js:392(anonymous function) @ index.js:35(anonymous function) @ index.js:241(anonymous function) @ main.js:3910__webpack_require__ @ main.js:556fn @ main.js:87(anonymous function) @ multi_main:5(anonymous function) @ main.js:586__webpack_require__ @ main.js:556(anonymous function) @ main.js:579(anonymous function) @ main.js:582
invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of AppContainer.
There was a problem hiding this comment.
Newb question. Can we use typescript instead of babel? If so could someone please suggest how to do it? Thanks
There was a problem hiding this comment.
I have the same issue as @gperdomor
I'm following the https://github.com/gaearon/redux-devtools/blob/master/examples/todomvc
Nevermind, that was just a silly typo when importing AppContainer
There was a problem hiding this comment.
@gaearon There should be a way that webpack can automatically wrap your entry point with an entrypoint that includes AppContainer. Not quite like the last version of reloader, but more like a real module that imports your entry point and maybe your entry point doesn't include ReactDOM render or something. Or maybe it could setup webpack to intercept ReactDOM and inject a module that includes AppContainer and ReactDOM. Just trying to think of a way to not muck up people's code with this AppContainer alien species of code! :P :)
es2015-loosepreset is now deprecated. You should usees2015preset as follow according to this: