Why is bundle.js stuck in pending status on my web page?

Question

I have an issue when i open a page of my project the broswers shows loading for ever and on network tab i see that bundle.js status is pending. (for the same bundle if i open other routes of the project everything work fine).

If i remove all product. variables with plain text page works fine but if i use variables page is loading infinite.

This happening on server rendering (if i follow the react route till the page it doesn't show loading. if i refresh or write the direct url of the page then loading infinite

server log error

(node:12560) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Cannot read property 'title' of undefined

import React, { Component } from 'react';
import { Helmet } from 'react-helmet';


class ProductDetails extends Component {
  componentDidMount() {
  }

  //  return users
  renderProducts() {
    const { product } = this.props;
return (
  <div className="card p-2 my-3">
    <Helmet>
      <title>{`${product.title} - ${product.category} - Το Σταρένιο`} </title>
    </Helmet>
    <div className="row pb-4 pt-2"><h1 className="col-12 text-center">{product.title}</h1></div>
    <div className="row">
      <div className="col-sm-12 col-md-6">
        <img className="card-img-top" src={product.img} alt={`${product.title} - ${product.category}`} />
      </div>
      <div className="col-sm-12 col-md-6">
        <div className="column">
          <div className="product-price">{product.price}€/{product.unit}</div>
        </div>
      </div>
    </div>
  </div>
);
  }

  render() {
    return (
      <div className="container">
        {this.renderProducts()}
      </div>
    );
  }
}

//  export
export default ProductDetails;

webpack for client

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

  //root file for the client/browser app
  entry: './src/client/client.js',

  //output file and its location
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname,'public'),
  },

  //run babel for every filename
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets:
          [
            'react',
            'stage-0',
            [
              'env',
              {
                targets:
                {
                  browsers:
                  ['last 2 versions']
                }
              }
            ]
          ]
        }
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css-loader!postcss-loader'),
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('public/style2.css', {
      allChunks: true,
    })
  ]
};

webpack for server bundle

const path = require('path');
const webpackNodeExternals = require('webpack-node-externals');

module.exports = {
  //  tell webpack we building bundle for nodejs not browser
  target: 'node',

  //  root file for the server application
  entry: './src/index.js',

  //  output file and its location
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'),
  },
  externals: [webpackNodeExternals()],

  //  run babel for every filename
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets:
          [
            'react',
            'stage-0',
            [
              'env',
              {
                targets:
                {
                  browsers:
                  ['last 2 versions']
                }
              }
            ]
          ]
        }
      }
    ]
  }
};

Answer 1

on index.html file i had wrong src path for bundle.js correct way src="/bundle.js"

while by fault i had written src="bundle.js"

so on localhost:3000/product/:id page it was trying to get /product/bundle.js

Answer 2

In addition to the selected answer, check paths defined in your index.html (or other) template if you have one. I had a wrong path defined for a website icon. Once I pointed the path to the right folder, localhost started loading immediately (within 1 second).