Webpack Not Serving React Component

Question

I have created my webpack config file below:

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/main.js',
output: {
    filename: 'bundle.js'
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: '/node_modules/',
            use: [
                {
                    loader: 'babel-loader'
                }
            ]
        },
        {
            test: /\.html$/,
            use: [
                {
                    loader: 'html-loader',
                    options: {minimize: true}
                }
            ]
        }
    ]
},
plugins: [
    new HtmlWebPackPlugin({
        template: './src/index.html',
        filename: './index.html'
    })
]
};

and added all the necessary packages babel with env and react presets. I have my index.html file and TestComponent like below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React 16 Webpack Setup</title>
</head>
<body>
    <script src="bundle.js" type="text/javascript"></script>

    <div id="test">

    </div>
 </body>
</html>

and component code:

import React, { Component } from 'react';

export default class TestComponent extends Component {
render(){
    return (
        <div>
            <h2>React Setup</h2>
        </div>
    )
  }
}

Here's my main.js file where I'm hosting the component:

import React from "react";
import ReactDOM from "react-dom";
import Test from './TestComponent';

ReactDOM.render(<Test/>, document.getElementById("test"));

The problem is that when I run this script from package.json, I don't get any output/dist folder and also the component doesn't render in the browser. On which url do I have to visit to see the output just like with create-react-app?

what is the script you are running?

azium
– azium

2018-10-11 00:02:14 +00:00
Commented Oct 11, 2018 at 0:02 — azium
– azium, Commented Oct 11, 2018 at 0:02

Michael Abeln · Accepted Answer · 2018-10-11 03:03:12Z

1

Import your <script> at the bottom of the <body> tag in the HTML.

In your case, the browser is reading through the DOM and finding the <script> tag before it is finding the <div id="text"> node. What this means is that the browser will read through your script, and then try and render your <Test/> component into an HTML node with the id="test". The browser can't find the HTML node with the id="test" though because it hasn't read it yet, so it fails.

Make sense? See below...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React 16 Webpack Setup</title>
</head>
<body>

    <div id="test"></div>

    {* import scripts at the bottom of the body *}
    <script src="bundle.js" type="text/javascript"></script>

 </body>
</html>

Hope this helps, let me know if you're still running into issues.

answered Oct 11, 2018 at 3:03

Michael Abeln

2,58713 silver badges21 bronze badges

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

7 Comments

Darth Plagueris Over a year ago

It makes a lot of sense the way you put it but still the component is not rendered

Darth Plagueris Over a year ago

I am using HTMLWebPackPlugin but it throws an error about entry point undefined, could this be the issue?

Darth Plagueris Over a year ago

Should I open the html from dist or src folder, I have tried both still same result

Michael Abeln Over a year ago

Where are you using HTMLWebPackPlugin? I don't see that in your webpack config file above, did you post the whole file?

Darth Plagueris Over a year ago

I have added it now. Please check. Thanks

|

Collectives™ on Stack Overflow

Webpack Not Serving React Component

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related