Component not rendering in simple React.js app

Question

I'm trying to get a simple "Hello, World"-type React.js app from the book React and React Native running under Node/webpack-dev-server. I'm not seeing any errors, but the page is blank when I visit it in my browser.

Here's how I tried—and failed—to run the book's very first example:

Install node and npm using these steps (adapted from this gist):

$ mkdir ~/.local/node-latest-install
$ cd ~/.local/node-latest-install
$ curl http://nodejs.org/dist/node-latest.tar.gz | tar xz --strip-components=1
$ ./configure --prefix=~/.local
$ make -j install
$ curl https://www.npmjs.com/install.sh | sh
$ node -v; npm -v
v7.7.4
4.1.2

Clone the examples repo from the book:

$ git clone https://github.com/PacktPublishing/React-and-React-Native.git

Run npm install from the top-level examples folder:
```
$ cd React-and-React-Native
$ npm install
```

Attempt to compile/run hello-jsx example:

$ cd Chapter02/hello-jsx
$ node ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js
...
ERROR in ./main.js
Module build failed: Error: React Hot Loader: The Webpack loader is now exported separately. If you use Babel, we recommend that you remove "react-hot-loader" from the "loaders" section of your Webpack configuration altogether, and instead add "react-hot-loader/babel" to the "plugins" section of your .babelrc file. If you prefer not to use Babel, replace "react-hot-loader" or "react-hot" with "react-hot-loader/webpack" in the "loaders" section of your Webpack configuration.
at Object.warnAboutIncorrectUsage (/home/evadeflow/.local/React-and-React-Native/node_modules/react-hot-loader/lib/index.js:7:11)
@ multi main
webpack: Failed to compile.

Edit hello-jsx/webpack.config.js to work around the above error:

diff --git a/Chapter02/hello-jsx/webpack.config.js b/Chapter02/hello-jsx/webpack.config.js
index 312f152..592e767 100644
--- a/Chapter02/hello-jsx/webpack.config.js
+++ b/Chapter02/hello-jsx/webpack.config.js
@@ -13,7 +13,7 @@ module.exports = {
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
-        loaders: ['react-hot', 'babel?presets[]=es2015'],
+        loaders: ['react-hot-loader/webpack', 'babel?presets[]=es2015'],
       },
     ],
   },

Recompile/re-run:

$ node ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js
http://localhost:8080/webpack-dev-server/  
webpack result is served from /
content is served from /home/evadeflow/.local/React-and-React-Native/Chapter02/hello-jsx
Hash: 590282c761dccbb5710a
Version: webpack 1.14.0
Time: 1260ms
         Asset    Size  Chunks             Chunk Names
main-bundle.js  978 kB       0  [emitted]  main 
chunk    {0} main-bundle.js (main) 923 kB [rendered]
    [0] multi main 52 bytes {0} [built]
    [1] (webpack)-dev-server/client?http://0.0.0.0:8080 3.97 kB {0} [built]
    [2] /home/evadeflow/.local/React-and-React-Native/~/url/url.js 23.3 kB {0} [built]
    [3] /home/evadeflow/.local/React-and-React-Native/~/url/~/punycode/punycode.js 14.6 kB {0} [built]

  <... lots of similar output omitted ...>

  [251] /home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMUnknownPropertyHook.js 4.32 kB {0} [built]
  [252] /home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMNullInputValuePropHook.js 1.37 kB {0} [built]
  [253] /home/evadeflow/.local/React-and-React-Native/~/react-dom/lib/ReactDOMInvalidARIAHook.js 3.14 kB {0} [built]
webpack: Compiled successfully.

After the last step, node is running. However, I see a blank page when I hit localhost:8080 in my browser:

Am I doing something wrong?

Do you have any console errors in your localhost:8080 page? If so, can you share them with us? — Alex Fallenstedt
– Alex Fallenstedt, Commented Mar 28, 2017 at 21:31
The only items in the console are: Error: The document content type is not HTML : undefined, followed by Result: 0 errors / 0 warnings and Info: W3c Online Validation. — evadeflow
– evadeflow, Commented Mar 28, 2017 at 21:36
That's a weird one. I poked around on the repo and it feels like it should run...but alas it's probably another victim of JavaScript's transpiler hell. If you're interested, i can point you to some other resources that helped me learn react. — Alex Fallenstedt
– Alex Fallenstedt, Commented Mar 28, 2017 at 21:49
"Error: The document content type is not HTML : undefined" are you setting <!DOCTYPE>? — Daniel Lizik
– Daniel Lizik, Commented Mar 28, 2017 at 23:11

JasonPrime8 · Accepted Answer · 2017-03-28 23:28:51Z

2

Try the following:

1) Install webpack both globally and locally, i.e. at the base directory of the code do the following:

npm install webpack --global
npm install webpack --save-dev

2) Install the webpack dev server, also both globally and locally:

npm install webpack-dev-server --global
npm install webpack-dev-server --save-dev

3) Update the webpack.config.js files, in particular the "loader" line, as follows:

(A) Replace 'react-hot' with 'react-hot-loader/webpack'

(B) Replace 'babel' with 'babel-loader'

So for example, the "hello-jsx" file here is the line in the OLD, ORIGINAL webpack.config.js file:

loaders: ['react-hot', 'babel?presets[]=es2015'],

And here is the line in the NEW, UPDATE webpack.config.js file:

loaders: ['react-hot-loader/webpack', 'babel-loader?presets[]=es2015'],

4) Run the webpack dev server (from the subdirectory) with the hot and inline options, e.g.

$ pwd
[whatever_base_directory]/Chapter02/hello-jsx
$ webpack-dev-server --hot --inline

answered Mar 28, 2017 at 23:28

JasonPrime8

362 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

evadeflow Over a year ago

Wow. Your answer helped me figure out how to run the examples—thank you! It turns out, though, that adding the --hot option to my webpack-dev-server invocation was sufficient: node ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot. I'm definitely going to accept your answer, but perhaps you could delete the part about installing webpack and webpack-dev-server globally? For me, it works with or without --inline. (I'm omitting it for now, since I don't know what it does.)

evadeflow Over a year ago

Also, it seems that simply changing react-hot to react-hot-loader/webpack is sufficient. Your patch to webpack.config.js may be 'better' than mine (i.e., using 'babel-loader?presets[]=es2015'], instead of 'babel?presets[]=es2015'],), though, so perhaps that should remain in your answer. (I remember seeing an error message at some point saying that babel-loader is now preferred, but I can't recall where.) .In any case... just wanted to leave a note for posterity that adding --hot to my webpack-dev-server invocation was the minimum addition for the steps in my question to work.

JasonPrime8 Over a year ago

On the babel loader, check the browser console and see if it is giving an error or warning, if not you may be good but if so may need to make that change as well.

JasonPrime8 Over a year ago

Also on installing the dev server globally...once I did that then all I needed to do was run the webpack-dev-sever command from each project directory and it would run that project within a chapter, i.e. I still used the hot and inline options but I don't need to give the full path (e.g. ../../node_modules/etc.)...nice to be able to just go to any subdirectory and type the same, simple "webpack-dev-sever" command.

evadeflow Over a year ago

Omitting --inline didn't result in any console errors, so I'll continue to leave it out for now, until I fully understand how it works and what (if any) additional entries may be needed in webpack.config.js to fully take advantage of webpack's HMR feature with React. (The webpack-dev-server docs imply that using --inline with --hot is recommended, so that's probably a sensible combination, in general.)

|

Adam Boduch · Accepted Answer · 2017-03-30 13:18:51Z

0

I've resolved a lot of these issues. Try pulling the latest.

The two major things I've fixed are:

Using Webpack 2 as a dependency and adding instructions for installing webpack/webpack-dev-server globally as part of the initial setup.
Simplified webpack configuration for each example. We only need babel-loader and one entry point.

Give it a try, let me know if it's any easier to get going.

answered Mar 30, 2017 at 13:18

Adam Boduch

11.2k3 gold badges32 silver badges38 bronze badges

2 Comments

evadeflow Over a year ago

Yes, thank you, Adam, everything is working fine now, thanks for the quick turnaround. Really enjoying the book so far...

Adam Boduch Over a year ago

Super. Keep the feedback coming.

Collectives™ on Stack Overflow

Component not rendering in simple React.js app

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related