CODEWITHSUNDEEP
javascriptreactjswebpackwebpack-dev-server
Ashwin Prasad
Ashwin Prasad

Reputation: 17

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

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.

Upvotes: 0

Views: 1445

Answers (1)

kuiro5
kuiro5

Reputation: 1601

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.

Upvotes: 1

Related Questions