React index.html rendered but react component does not

Question

i couldn't figure out why ReactDOM does't render my simple component but seems to keep and render just the plain index.html

package.json

    {
  "name": "client2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "babel-node buildScripts/server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3",
    "path": "^0.12.7"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.8.3",
    "webpack-dev-middleware": "^3.1.3"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ],
    "env": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

webpack.config.dev.js

import webpack from 'webpack'
import path from 'path'

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


export default {
  devtool: 'inline-source-map',
  entry: [
    path.resolve(__dirname, 'src/index.js')  
   ],
  output: {
    path: path.resolve(__dirname, 'src'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  module:{
    rules:[
        {test: /\.js$/ , loader:'babel-loader', exclude: '/node_modules/'},
        {test: /\.jsx$/ , loader:'babel-loader', exclude: '/node_modules/'}
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        inject: 'body'
   })
  ] 
}

buildScript/server.js

    import express from 'express';
import path from 'path';
import webpack from 'webpack';
import config from '../webpack.config.dev';

const compiler = webpack(config);

/* var express = require('express')
var path = require('path') */

const port = 8081;
const app = express();

app.listen(port, function (error) {
    if(error) {
        console.log(error);
    }
});

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, '../src/index.html'));
});

app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}));

src/index.js

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

class App extends React.Component {
    constructor(){
        super();
        console.log("App Hello")
    }

    render(){
        return(
            <div>
                <h1>Howdy from React!</h1>
            </div>
        )
    }
}

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

src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hey!</title>
  </head>
  <body>
    <div id="root"></div>
    <h1>Hello World!</h1>
  </body>
</html>

The only response i get is

With no logs from my index.js react "App".

I've been trying several solutions, none happened aside from my express server not working. What might be the problem here ? Thank you very much !

you need to import the js file, which you are building in webpack. You don't have anything included right now — Leo Odishvili
– Leo Odishvili, Commented May 16, 2018 at 8:35

Leo Odishvili · Accepted Answer · 2018-05-16 08:39:18Z

3

As I wrote in comment, you should include your js

<html lang="en">
  <head>
    <title>Hey!</title>
  </head>
  <body>
    <div id="root"></div>
    <h1>Hello World!</h1>
    <script src="/bundle.js"></script>
  </body>
</html>

answered May 16, 2018 at 8:39

Leo Odishvili

1,0421 gold badge8 silver badges30 bronze badges

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

2 Comments

Yariv Levy Over a year ago

Thank you for the answer, i have tried doing what you mentioned and now i get a 404 response - "/bundle.js" not found. any suggestions ? what am i missing ?

Leo Odishvili Over a year ago

This is strange. Do you have bundle.js after build in your src folder?

Ben West · Accepted Answer · 2018-05-16 08:36:23Z

1

Your html file needs to link to bundle.js

<script src="/bundle.js"></script>

answered May 16, 2018 at 8:36

Ben West

4,5861 gold badge19 silver badges17 bronze badges

2 Comments

Yariv Levy Over a year ago

Thank you for the answer, i have tried doing what you mentioned and now i get a 404 response - "/bundle.js" not found. any suggestions ? what am i missing ?

Ben West Over a year ago

Right now your server will only serve index.html. Maybe look at express.static to serve all files from your site directory.

Yariv Levy · Accepted Answer · 2018-05-16 08:46:08Z

1

Thanks for Leo Odishvili and Ben West for helping above - the answer is really adding <script src="/bundle.js"></script> to the index.html

The only change was to change /bundles.js to "./webservice_entrypoint/bundle.js"as webservice_entrypoint would be the url path to my react app.

Thanks everyone !

answered May 16, 2018 at 8:46

Yariv Levy

1621 silver badge9 bronze badges

Comments

Subhadip Pal · Accepted Answer · 2020-01-05 00:55:11Z

0

Also you can check the "html-webpack-plugin" and add the plugin to the "plugins" configuration of the webpack.config.js, this will allow you to use any template html file from inside your src directly and bundle it in the dist/ folder with the included script tag already compiled and added. It is really an useful plugin.

answered Jan 5, 2020 at 0:55

Subhadip Pal

631 gold badge2 silver badges12 bronze badges

Collectives™ on Stack Overflow

React index.html rendered but react component does not

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related