为什么 bundle.js 在我的网页上停留在待处理状态？

Question

当我打开我的项目页面时，我遇到了一个问题，broswers 显示永远加载，在网络选项卡上，我看到 bundle.js 状态为待处理。 （对于同一个包，如果我打开项目的其他路线，一切正常）。

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

这发生在服务器渲染上（如果我按照反应路线直到页面不显示加载。如果我刷新或写入页面的直接 url 然后无限加载

服务器日志错误

（节点：12560）UnhandledPromiseRejectionWarning：未处理的承诺拒绝（拒绝ID：2）：TypeError：无法读取未定义的属性“title”

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

用于服务器包的 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

Answer 2

除了选定的答案，如果您有 index.html（或其他）模板中定义的路径，请检查。 我为网站图标定义了错误的路径。 一旦我将路径指向正确的文件夹，本地主机立即开始加载（在 1 秒内）。