Webpack-dev-server injects bundle in HTML page, but nothing is rendered

Question

When I run webpack-dev-server (Command: "webpack-dev-server --mode development --open --progress --hot"), my bundle is injected into the html page, but nothing is rendered.

Webpack.config.js file:

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: "cheap-eval-source-map",
    entry: path.join(__dirname, 'src', 'App.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(__dirname, 'src')
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        inline: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html'),
            hash: true,
        })
    ]
}

Index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

App.js file:

import React from 'react';

export default class App extends React.Component {
    render() {
        return (
            <div className="container">
                <h1>React Starter App</h1>
            </div>
        );
    }
}

The thing is if I change App.js to:

alert("test");

It will display the alert on the page.

What does your index.html file look like? Do you have an element with id app? — Tholle

kuiro5 kuiro5 · Accepted Answer · 2018-08-10T00:28:07

In your webpack.config.js, change your entry point to index.js instead of App.js since index.js handles your initial rendering:

// webpack.config.js      
entry: path.join(__dirname, 'src', 'index.js');

The alert in App.js was being displayed because App.js was still getting bundled. However, it wasn't being rendered as the render logic in index.js wasn't being bundled and executed by webpack.

Webpack-dev-server injects bundle in HTML page, but nothing is rendered

1 Answers