Question

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

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

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

服务器日志错误

（node：12560）UnhandledPromiseRejectionWarning：未处理的promise promise（拒绝ID：2）：TypeError：无法读取属性＆＃39; title＆＃39;未定义的

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

在index.html文件上我有错误的bundle.js src路径正确的方法src =＆＃34; /bundle.js"

虽然我已经写了src =＆＃34; bundle.js＆＃34;

所以在localhost：3000 / product /：id页面上它试图获得/product/bundle.js

Answer 2

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

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

2 个答案: