React not rendering on Webpack Dev server

Question

I had this working, can't remember what I changed and now the page loads but no react is rendered onto the screen. Not sure where the error is. No errors occur when I run webpack -m followed by npm start

webapp folder is like this...

{app} -- App.js
{public} -- bundle.js -- index.html
webpack.config.js
.babelrc
package.json

here are the important files

webpack

module.exports = {
  entry: './app/App.js',
  output: {
    path: './public',
    filename: 'bundle.js',
  },
  devServer: {
      inline:true,
      contentBase: './public',
      port: 3333
    },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  }
}

package.json

{
  "name": "newaccount",
  "version": "1.0.0",
  "description": "a form submission for new accounts",
  "main": "App.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "---",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "html-webpack-plugin": "^2.24.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

.babelrc

{
  "presets": [
          "es2015",
          "react"
    ]
}

App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';



class Testing extends Component {
    render() {
        return (
            <div>
                <h3>JUST A TEST</h3>
            </div>
        )
    }
}

ReactDOM.render(<Testing />, document.getElementById('app'));

I have ever tried making the Component Testing an ES6 const like...

const Testing = () => return <div><h3>JUST A TEST</h3></div>

and still can't get anything to show up on the localhost:3333 or the full path from my computer.

Thanks for any help

no errors in the browser console? – azium Dec 06 '16 at 01:38 — azium, Dec 06 '16 at 01:38
nope no errors in the console :( – Stephane Aug 05 '18 at 15:41 — Stephane, Aug 05 '18 at 15:41

score 4 · Accepted Answer · edited May 23 '17 at 12:24

I was able to get your example to run by doing three things.

First, add an HTMLWebpackConfiguration at the top of webpack.config.js. Then, add an index.html page in /app. Finally, make sure the configuration is pointed to the HTML file. The final webpack.config.js looks like this:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: __dirname + '/app/App.js',
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js',
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
      inline:true,
      contentBase: './public',
      port: 3333
    },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  }
}

The app/index.html looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="app"></div>
</html>

Sources of info:

https://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app-5f804d729d3b#.f4sslv7ub

Invariant Violation: _registerComponent(...): Target container is not a DOM element

http://javascriptplayground.com/blog/2016/07/webpack-html-plugin/

Yeah I've actually made that example from that tutorial - was extremely helpful. I was hoping to find a way to get my localhost running without html-webpack mod. — user3622460, Dec 06 '16 at 04:33
I think that the only way that it works is if you have an HTML file somewhere to "kick off" your bundle. But if you find any other solution, please post it - I'd like to know too! — Brad, Dec 07 '16 at 00:02

score 2 · Answer 2 · answered Jun 21 '17 at 01:21

I was having the same problem. You might want to revisit this solution.

After checking the webpack-dev-server documentation, I realized I needed to specify the devServer collection of properties in webpack config. You have already done this in your example, which was 7 months prior to my reply. Example from their docs:

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

This resolved my case where index.html was not even loaded (per the browser network debug list).

I did not need to add HTMLWebpackConfiguration anywhere.

https://webpack.js.org/configuration/dev-server/

React not rendering on Webpack Dev server

2 Answers2