React code is not running when using Webpack, React, Babel combination

Question

I've been following Petr Tichy (@ihatetomatoes) Webpack 2 tutorial series, and have got to the this vid which covers installing React and Babel.

I've gone over the code with a fine tooth comb and spent a couple of hours googling but I just cannot get my code to perform in the expected way. The React method in my app.js file does not execute.

It should render "Hello World" into the root element of the index page, but I get nothing.

This is what I have...

./src/app.js

const css = require("./styles.scss");

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

./src/index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  <body>
      <div id="root"></div>
  </body>
</html>

webpack.config.js

const HTMLWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { 
                test: /\.scss$/, 
                use: ExtractTextPlugin.extract( { 
                    fallback: 'style-loader', 
                    use: ['css-loader','sass-loader'] 
                } ) 
            },
            { 
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            } 
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            title: "IWTE",
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
            },
            hash: true
        }),
        new ExtractTextPlugin("styles.css")
    ],
    devServer: {
        contentBase: "./dist",
        compress: true,
        hot: true,
        open: true
    },
}

.babelrc

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

package.json

{
  "name": "creator",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --progress --colors",
    "prod": "webpack -p"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "eslint": "^4.7.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

Any advice or suggestions on what route to follow to debug this is greatly appreciated! I'm a relative noob to frontend dev. Thanks!

try looking at dev tools. if your assets are being used. should find <script src="dist/app.js"></script> — Rei Dien
– Rei Dien, Commented Sep 20, 2017 at 4:25
@ReiDien I can see that my js bundle is being created and loaded by the page. Console log appear as expected if I add them to the script. It's just the react code that doesn't execute, from what I can see. — Phil Boltt
– Phil Boltt, Commented Sep 20, 2017 at 4:31

Shubham Jain · Accepted Answer · 2017-09-20 05:31:14Z

2

Inside of your package.json make a change as :

"scripts": {
    "dev": "webpack-dev-server --hot --progress --colors",
    "prod": "webpack -p"
}

You need to add --hot inside of your dev commmand to enable hot reloading.

Let me know if it doesn't work. Cheers!

answered Sep 20, 2017 at 5:31

Shubham Jain

9301 gold badge14 silver badges24 bronze badges

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

2 Comments

Phil Boltt Over a year ago

Wow. I did not expect that to be the reason... but it works! Thanks @ShubhamJain.

Shubham Jain Over a year ago

Glad I could help :)

Collectives™ on Stack Overflow

React code is not running when using Webpack, React, Babel combination

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related