Debug Points Not Being Hit - JS Debug - React - 2017.2.2

Could you please precise:

1) Do you compile your jsx files in js with webpack?

2) if yes, please provide webpack.config. Otherwise, tell us how you do it and provide your config file

 webpack.config.build

var webpack = require("webpack");
var path = require("path");
var CleanWebpackPlugin = require("clean-webpack-plugin");
var FaviconsWebpackPlugin = require("favicons-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var merge = require("webpack-merge");
var Common = require("./webpack.config.common");
var helper = require("./helper");

var exposedProperties = ["window", "navigator", "document"];
var html = '';
global.document = jsdom(html);
global.documentFake = true;
global.window = document.defaultView;


Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === "undefined") {
    exposedProperties.push(property);
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: "node.js"
};

const buildPath = __dirname + "/../build";

let plugins = [
  new CleanWebpackPlugin(buildPath, {
    root: process.cwd()
  }),
  new webpack.DllReferencePlugin({
      context: path.join(__dirname, "../"),
      manifest: require("../static/dist/vendor-manifest.json")
  }),
  new FaviconsWebpackPlugin({
    logo: "./static/images/logo.png",
    prefix: "static/images/favicons/",
    // Emit all stats of the generated icons
    emitStats: false,
    // The name of the json containing all favicon information
    statsFilename: "iconstats.json",
    icons: {
      android: false,
      appleIcon: false,
      appleStartup: false,
      coast: false,
      favicons: true,
      firefox: false,
      opengraph: false,
      twitter: false,
      yandex: false,
      windows: false
    }
  }),
  new ExtractTextPlugin("style.css"),
  new CopyWebpackPlugin([
    {
      from: "static",
      to: "static"
    },
    {
      from: "static/dist",
      to: "static/dist"
    },
    {
      from: "eafsdf.html",
      to: "asfsf.html"
    },
    {
      from: "apple-app-site-association",
      to: ""
    },
  ])
];

if (process.env.NODE_ENV === 'production') {
  plugins.push(
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  );
  plugins.push(new webpack.optimize.UglifyJsPlugin());
}

module.exports = merge(Common, {
  cache: true,
  output: {
    path: buildPath,
    filename: "bundle.js",
  },
  plugins
});

webpack.config.develop.js

const webpack = require("webpack");
const path = require("path");
const merge = require("webpack-merge");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const Common = require("./webpack.config.common");

let plugins = [
  new ExtractTextPlugin("style.css"),
  new webpack.DllReferencePlugin({
      context: path.join(__dirname, "../"),
      manifest: require("../static/dist/vendor-manifest.json")
  })
];

if (process.env.NODE_ENV === 'production') {
  plugins.push(new webpack.optimize.UglifyJsPlugin());
}

module.exports = merge(Common, {
  devServer: {
    disableHostCheck: true,
    historyApiFallback: {
      disableDotRule: true
    },
    contentBase: "./",
    host: "0.0.0.0",
    port: 8337,
  },
  plugins,
});

webpack.config.common

const webpack = require("webpack");
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const DefinePlugin = require('webpack/lib/DefinePlugin');
const path = require('path');
const postcssImport = require('postcss-import');
const helper = require('./helper');

const config = helper.getConfig();
const lang = helper.getLanguage();

module.exports = {
  cache: true,
  // target: 'node',
  entry: ['babel-polyfill', './src/index.js'],
  stats: { children: false },
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js',
    /*
     * You must compile to UMD or CommonJS
     * so it can be required in a Node context:
     */
    libraryTarget: 'umd'
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: [ //important for performance!
            path.join(__dirname, "../", "index_template"),
            path.join(__dirname, "../", "src"),
            path.join(__dirname, "../", "node_modules", "@ddfff", "shared-react")
        ],
        query: {
            cacheDirectory: true, //important for performance
        }
      },
      {
        test: /\.css$/,
        include: [ //important for performance!
            path.join(__dirname, "../", "src"),
            path.join(__dirname, "../", "node_modules", "@ddfff, "shared-react")
        ],
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]&minimize',
            'postcss-loader'
          ]
        }),
      },
      {
        test: /\.css$/,
        include: [ //important for performance!
            path.join(__dirname, "../", "node_modules", "react-smartbanner", "dist")
        ],
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader?modules&importLoaders=1&localIdentName=[local]&minimize',
            'postcss-loader'
          ]
        }),
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
    ]
  },
  plugins: [
    new ProgressBarPlugin(),
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
    /**
     * Plugin: DefinePlugin
     * Description: Define free variables.
     * Useful for having development builds with debug logging or adding global constants.
     *
     * Environment helpers
     *
     * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
     */
    // NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
    new DefinePlugin({
      ExternalConfig: JSON.stringify(config.remoteConfig),
      TealiumEnv: JSON.stringify(config.tealiumEnv),
      Language: JSON.stringify(lang),
      SegmentKey: JSON.stringify(config.segmentKey),
      NewRelicKey: JSON.stringify(config.newRelicKey),
      AdobeAnalyticsRSID: JSON.stringify(config.adobeAnalyticsRSID),
      Version: JSON.stringify(require("../package.json").version),
      BuildNumber: JSON.stringify(config.buildNumber),
      AccessEnablerUrl: JSON.stringify(config.accessEnablerUrl),
      SportsFeatures: JSON.stringify(config.enableSportsFeatures),
    }),
  ]
};

I've setup debug per this article https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ but not working, still looking at it.  I also changed the devtool entry to 

devtool: "source-map",

I just installed https://webpack.js.org/loaders/source-map-loader/ and also set the following in webpack.config.develop.js

devtool: "source-map",

Why are my replies being moderated?

I've figured it out, following https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps works.

got it working https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/#comment-298229

https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/#comment-298229 - this helped, works.

can you delete the multiple posts, your forum is acting weird.  When I post something it's putting it toward the top so I never saw them!  Hence the dup posts.  And why do I not have the ability to delete the posts for x amount of time?

Just to clarify, now you're able to debug?