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!

Answer 1

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!

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

Question

1 answers

solution1
2 ACCPTED 2017-09-20 05:31:14

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

Question

1 answers

solution1 2 ACCPTED 2017-09-20 05:31:14

solution1
2 ACCPTED 2017-09-20 05:31:14