[WIP] Repository Documentation (non-gh-pages)

[gadicc]

Hi all, this PR will track all current works on the docs. Additional PRs are welcome against the next-docs branch, which will be squashed before the final merge. Please mention this issue in your PR (#257) so everyone involved in docs will be notified.

You can read the ongoing draft edition at https://github.com/gaearon/react-hot-loader/tree/next-docs/docs.

See also #260 for the gh-pages docs that live at http://gaearon.github.io/react-hot-loader/.

[laurentnguyen]

Forgot to close the require: require('./containers/rootContainer.js');

[gadicc]

thanks for the extra pair of eyes! fixed.

[gadicc]

I merged in @hedgerh's work from #254 that we can continue here. Some of the previous work was moved to #260, since it was intended for the gh-pages:

This is non-website doc stuff. Made a first pass at a Migration to 3.0 guide and added stuff to main README.

I also think the list of starter kits/boilerplates doesn't really make sense in the scope of this project, and should be taken out, with the exception of react-hot-boilerplate. A decent few of them were outdated/abandoned anyway. I can add them back if you don't agree, though.

[nilshartmann]

Hi,

thanks for the consoleErrorReporter tip!

I tried to use it as described above and have a few questions/remarks:

• I had to add redbox-react to my package.json. If that is desired, I think it would make sense to add it to the docu
• React.PropTypes.error raised an error: prop type 'error' is invalid. I changed it to the proptype definition from Redbox (React.PropTypes.instanceOf(Error).isRequired) then it works. Not sure if this is a problem with my React version?
• Might not be directly related but maybe someone knows: What is the best setting of devtool in my webpack.config.js file? I tried several ones but the stacktraces dumped both by Redbox and from console.error doesn't point to my source files (both link to my bundle.js that has been generated by webpack, like this: http://localhost:3000/dist/bundle.js:36376:12). When running my app without hotloader (just removing the AppContainer wrapper, no changes to .babelrc or webpack.config.js) all errors dumped on Chrome's devtool console are correctly linked to my source files (something like webpack:///./client/src/components/editor/ContactEditor.js)

My setup: RHL 3.0.0beta, React 15, npm 2.14.12, babel 6 (with presets es2015, stage-0, react and plugin react-hot-loader/babel), webpack-dev-server 1.14, Chrome 50.0, MacOS

Again: thanks for your efforts!

Nils

[gadicc]

thanks @nilshartmann, that's some important feedback and I've updated the doc (yeah, the PropType.error is from react 15, my bad). I'm repasting your 3rd question here so it doesn't get lost, hoping some of the webpack users can help with that (I use Meteor):

Might not be directly related but maybe someone knows: What is the best setting of devtool in my webpack.config.js file? I tried several ones but the stacktraces dumped both by Redbox and from console.error doesn't point to my source files (both link to my bundle.js that has been generated by webpack, like this: http://localhost:3000/dist/bundle.js:36376:12). When running my app without hotloader (just removing the AppContainer wrapper, no changes to .babelrc or webpack.config.js) all errors dumped on Chrome's devtool console are correctly linked to my source files (something like webpack:///./client/src/components/editor/ContactEditor.js)

[gadicc]

• Explain about rhl/webpack vs rhl/babel for exports for top-level assignments.

[hedgerh]

What is the best setting of devtool in my webpack.config.js file?

@nilshartmann: Looks the official boilerplate, react-hot-boilerplate, is using eval for the devtool property in the next branch, which is a good reference for seeing how to configure React Hot Loader 3.0. Are you having issues with eval?

https://github.com/gaearon/react-hot-boilerplate/blob/next/webpack.config.js

[nilshartmann]

Hi @hedgerh,

thanks for your reply. I've checked the react-hot-boilerplate project and tried both eval and source-maps for the Sources and for the stacktrace shown by React Hot Loader (Redbox) in case of a runtime error.

eval

Using eval I see each single JS file of the Counter
in Chrome Source tab (webpack:// - . - src - .js-Files). But the files shown are the compiled ones, not my source files.

Stacktraces rendered by React Hot Loader shows a webpack:///./src/Counter.js?:54:16 link. The line number points to the line in the compiled file but when I click on the link nothing in Chrome seems to happen (file will not be opened).

source-maps

When I use source-maps as devtool instead, the original source files are shown in the Source tab and it is possible to set breakpoints and debug inside the source files.

But the rendered stacktrace points to the bundle.js file generated by webpack (http://localhost:3000/static/bundle.js:35142:17). A click on the links makes Chrome opening the bundle.js file in a new browser window.

I'm still unsure If I'm missing something (I'm really not an expert in source maps).

[tko]

ReactDOM.render probably

[HriBB]

Do we need

const NextApp = require('./containers/App').default

here?

I'm in a twilight zone ... it works without require() in one project, but it does not work at all in the other, no matter if I use require() or not.

Can anyone explain when it will work without?

[calesce]

Hey, anyone in this thread want to take a look at #402?

[calesce]

Also, I think it might be a good idea to merge into next this pretty soon, even if we're not done. Having docs and code in different places can be confusing.

[calesce]

I'm going to merge this because it's confusing that the docs for 3.0 are separate from the code. We probably only need to update Troubleshooting.md to make the docs good enough for the full 3.0 release.