title: React JS does not work in some browsers
body: <p><strong>See Update 2 below for what the real problem seems to be.</strong></p>
  
  <p>I am having trouble getting a React JS to work in some browsers. In Chrome it worked perfectly.</p>
  
  <p>In Firefox 47.0.1 I got this error:</p>
  
  <pre><code>SyntaxError: missing } after property list
  </code></pre>
  
  <p>In IE 11 I get this error:</p>
  
  <pre><code>SCRIPT1009: Expected '}'
  </code></pre>
  
  <p>I upgrade Firefox to Firefox 52 and it now works fine in Firefox.</p>
  
  <p>Any ideas what the issue is? </p>
  
  <p>Also, how can I track down errors like this when it points to the entire babel.js file? Normally errors are reported when the bundle.js is created, however, in this case it reports everything is working fine. </p>
  
  <p>The suggested duplicate <a href="https://stackoverflow.com/questions/13055310/syntaxerror-missing-after-property-list">SyntaxError: missing } after property list</a> is not the same issue as that one pinpoints what the error is whereas in my case it does not.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>As per Saral's answer I am posting my webpack.config.js file here:</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  
  var DIST_DIR = path.resolve(__dirname, 'dist');
  var SRC_DIR = path.resolve(__dirname, 'src');
  
  var config = {
    entry: SRC_DIR + '/app/index.js',
    output: {
      path: DIST_DIR + '/public/js',
      filename: 'bundle.js'
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          include: SRC_DIR,
          loader: 'babel-loader',
          query: {
              presets: ['es2015','react']
          }
        }
      ]
    }
  };
  
  module.exports = config;
  </code></pre>
  
  <p><strong>Update 2</strong></p>
  
  <p>Okay, I think I have tracked down the error. All my code seems to be correct, but for some reason the older browsers are getting hung up on the first occurrence of the word <code>async</code>. I was under the assumption that Babel converted the <code>async</code> into something older browsers could understand. However, this does not seem to be happening. What can I do to fix this?</p>
  
  <p>My <code>.babelrc</code> file looks like this:</p>
  
  <pre><code>{
    "presets" : ["es2015", "react"]
  }
  </code></pre>
  
  <p>Is it necessary to have the presets both in the webpack.config.js and the .babelrc file? If not, is one preferred over the other?</p>
  
  <p>In the future, how can I get the browser to report which JavaScript line it doesn't like? Currently it points to a huge "eval" section. </p>