CODEWITHSUNDEEP
reactjswebpackbabeljs
kojow7
kojow7

Reputation: 11384

React JS does not work in some browsers

See Update 2 below for what the real problem seems to be.

I am having trouble getting a React JS to work in some browsers. In Chrome it worked perfectly.

In Firefox 47.0.1 I got this error:

SyntaxError: missing } after property list

In IE 11 I get this error:

SCRIPT1009: Expected '}'

I upgrade Firefox to Firefox 52 and it now works fine in Firefox.

Any ideas what the issue is?

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.

The suggested duplicate SyntaxError: missing } after property list is not the same issue as that one pinpoints what the error is whereas in my case it does not.

Update:

As per Saral's answer I am posting my webpack.config.js file here:

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;

Update 2

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 async. I was under the assumption that Babel converted the async into something older browsers could understand. However, this does not seem to be happening. What can I do to fix this?

My .babelrc file looks like this:

{
  "presets" : ["es2015", "react"]
}

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?

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.

Upvotes: 2

Views: 10961

Answers (2)

Saral
Saral

Reputation: 118

Faced a similar issue in the past, the cause was usage of ES6 syntax and babel-polyfill was not properly configured in webpack. Looks like that is the case here.

Update

Configuring babel-polyfill in webpack

  1. Install babel-polyfill npm install --save babel-polyfill

  2. Update the entry key in your config to the following:

    entry: {
  bundle: [
    'babel-polyfill',
      SRC_DIR + '/app/index.js'
  ]
}

For more info: https://babeljs.io/docs/usage/polyfill/

Update 2 Try adding ["latest", "stage-0"] to your preset list. I have been using the following for a long time 

{
  "presets": ["latest", "stage-0", "react"]
}

No it's not necessary to add presets in your webpack config.

Update 3

For pointing to the exact source of the issue source map needs to enabled.

Check https://webpack.js.org/configuration/devtool/

Upvotes: 4

Rahul Rai
Rahul Rai

Reputation: 235

In your webpack configuration add devtool: 'source-map', This will help you in debugging after bundle creation. It will generate .map file which is quite easy to debug in any browser.

source-map - A full SourceMap is emitted as a separate file. It adds a reference comment to the bundle so development tools know where to find it and it will show the exact code that is giving error in any kind of browser.

 var config = {
      devtool: 'source-map',
      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']
            }
          }
        ]
      }
    };

More information you can find here https://webpack.js.org/configuration/devtool/

And If you are using ES6 syntax and facing issue with different browser in rendering then you need to install babel-polyfill This tools will take care of different ES6 Syntax for browser supported.

https://babeljs.io/docs/usage/polyfill/

Let me know if this is working for you

Upvotes: 0

Related Questions