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 :

1. 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 

2. Clone the examples repo from the book:

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

3. Run npm install from the top-level examples folder:

    $ cd React-and-React-Native $ npm install 

4. 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. 

5. 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'], }, ], }, 

6. 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?

Answer 1

Try the following:

1) Install webpack both globally and locally, ie 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, eg

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

Answer 2

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

The two major things I've fixed are:

1. Using Webpack 2 as a dependency and adding instructions for installing webpack/webpack-dev-server globally as part of the initial setup.
2. 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.