javascript - 为什么我的网页上的bundle.js 处于挂起状态？

Question

当我打开项目的页面时，我遇到一个问题，浏览器显示永久加载，并且在网络选项卡上我看到bundle.js 状态处于待处理状态。 (对于同一个包，如果我打开项目的其他路线，一切正常)。

如果我删除所有产品。纯文本页面的变量工作正常，但如果我使用变量页面则加载无限。

这种情况发生在服务器渲染上(如果我遵循 react 路线，直到页面不显示加载。如果我刷新或写入页面的直接 url，则加载无限

服务器日志错误

(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

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,
    })
  ]
};

用于服务器 bundle 的 webpack

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

在index.html文件中，我的bundle.js的src路径错误正确的方法 src="/bundle.js"

虽然我错误地写了 src="bundle.js"

因此在 localhost:3000/product/:id 页面上它试图获取/product/bundle.js