Skip to content

Commit

Permalink
RFC: remove React Transform from examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaearon
gaearon committed Feb 29, 2016
1 parent 3dfdd0a commit 6d45dfd
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 16 deletions.
7 changes: 1 addition & 6 deletions examples/async/.babelrc
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
{
"presets": ["es2015", "react"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
"presets": ["es2015", "react"]
}
44 changes: 36 additions & 8 deletions examples/async/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,43 @@
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import App from './containers/App'
import configureStore from './store/configureStore'

const store = configureStore()
const rootEl = document.getElementById('root')

render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
let render = () => {
const App = require('./containers/App').default
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootEl
)
}

if (module.hot) {
// Support hot reloading of components
// and display an overlay for runtime errors
const renderApp = render

This comment has been minimized.

Sign in to view

Copy link
@fobbyal

fobbyal Mar 13, 2016

Based on my experiment. This does not work well with react-router as it is. The react-router module prevents the changing of Routes once the Router is mounted. It gives the Warning: [react-router] You cannot change <Router routes>; it will be ignored message when trying to mount the app onto rootEl. I was able to work around this issue by unmouting the whole app from the 'rooEl' and then rendering.

const  renderApp = () => {
      ReactDom.unmountComponentAtNode(rootElement);
      render();  
}

I am not sure if this is okay and i am not sure it should be included in the example here.

Thank you for all contributions you've made. Redux made me re-think how i have been coding!!!

This comment has been minimized.

Sign in to view

Copy link
@gaearon

gaearon Mar 13, 2016

Author Contributor

Yes, this would be necessary with React Router, at least until it supports replacing routes dynamically via props.

This comment has been minimized.

Sign in to view

Copy link
@fobbyal

fobbyal Mar 14, 2016

After I made the change I noticed that the app no longer recovers from errors. The HMR throws the cannot find module error on one of my components in the project. I am not sure if this is a symptom me un-mounting the original app or not. I had to add the NoErrorsPlugin back to make it recover again. I just started exploring the javascript world a few months back so i am not experienced enough to tell if it is caused by the un-mounting. Just wanted to share my experience in case someone encounters the same error.
here is the stack trace ./grid-rnd/GridRnd.js is in my path

[HMR] Cannot check for update (Full reload needed)
process-update.js?e13e:96 [HMR] Error: Cannot find module "./grid-rnd/GridRnd"
    at webpackMissingModule (eval at <anonymous> (http://localhost:3000/static/0.9f2fdf9b8b636cb82ef8.hot-update.js:6:2), <anonymous>:19:80)
    at Object.eval (eval at <anonymous> (http://localhost:3000/static/0.9f2fdf9b8b636cb82ef8.hot-update.js:6:2), <anonymous>:19:175)
    at eval (eval at <anonymous> (http://localhost:3000/static/0.9f2fdf9b8b636cb82ef8.hot-update.js:6:2), <anonymous>:120:30)
    at Object.webpackHotUpdate.195 (http://localhost:3000/static/0.9f2fdf9b8b636cb82ef8.hot-update.js:6:2)
    at __webpack_require__ (http://localhost:3000/static/bundle.js:535:30)
    at fn (http://localhost:3000/static/bundle.js:76:20)
    at render (eval at <anonymous> (http://localhost:3000/static/bundle.js:4433:2), <anonymous>:51:25)
    at refresh (eval at <anonymous> (http://localhost:3000/static/bundle.js:4433:2), <anonymous>:78:9)
    at eval (eval at <anonymous> (http://localhost:3000/static/bundle.js:4433:2), <anonymous>:85:9)
    at Object.hotApply [as apply] (http://localhost:3000/static/bundle.js:475:16)

This comment has been minimized.

Sign in to view

Copy link
@gaearon

gaearon Mar 14, 2016

Author Contributor

Yes, removing NoErrorsPlugin is not necessary here. I tried it because having it brings some other unfortunate issues but I’m likely to add it back. See gaearon/react-transform-boilerplate#122
const renderError = (error) => {
const RedBox = require('redbox-react')
ReactDOM.render(
<RedBox error={error} />,
rootEl
)
}
render = () => {
try {
renderApp()
} catch (error) {
renderError(error)
}
}
module.hot.accept('./containers/App', () => {
setTimeout(render)
})
}

render()
2 changes: 1 addition & 1 deletion examples/async/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,10 @@
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.0.1",
"expect": "^1.6.0",
"express": "^4.13.3",
"node-libs-browser": "^0.5.2",
"redbox-react": "^1.2.2",
"webpack": "^1.9.11",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.2.0"
Expand Down
1 change: 0 additions & 1 deletion examples/async/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ module.exports = {
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
Expand Down

0 comments on commit 6d45dfd

Please sign in to comment.