Warum ist bundle.js auf meiner Webseite im Status "Ausstehend"?

Question

Ich habe ein Problem, wenn ich eine Seite meines Projekts die Broswers zeigt laden für immer und auf Netzwerk-Registerkarte Ich sehe, dass Bundle.js Status ausstehend ist. (für das gleiche Paket, wenn ich andere Routen des Projekts öffnen, funktioniert alles gut).

Wenn ich alles Produkt entferne. Variablen mit Nur-Text-Seite funktioniert gut, aber wenn ich Variablen verwende Seite wird unendlich geladen.

Dies geschieht auf dem Server-Rendering (wenn ich folgen der Route reagieren, bis die Seite nicht Laden nicht zeigen. Wenn ich die direkte URL der Seite, dann unendlich Laden

Server Protokollfehler

aktualisieren oder schreiben

(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 für 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 für Server bündeln

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

auf Datei index.html für bundle.js falsch src Weg ich hatte richtige Weg src = "/ bundle.js"

, während sie durch Fehler, den ich geschrieben hatte src = "bundle.js"

so auf localhost: 3000/Produkt /: id Seite wurde versucht /product/bundle.js