React JS does not work in some browsers

Question

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.

You have a syntax error somewhere (e.g. a missing comma). Some browser might be clever enough to correct that error. It could also be a caching problem. That's why your Firefox upgrade could help. — Sulthan, Apr 13 '17 at 17:58
How do I go about tracking down the error? Normally when the bundle.js is generated it displays errors, but in this case it is reporting that everything is fine. — kojow7, Apr 13 '17 at 18:27
Possible duplicate of [SyntaxError: missing } after property list](http://stackoverflow.com/questions/13055310/syntaxerror-missing-after-property-list) — Jordan Running, Apr 13 '17 at 18:33
@Sulthan No, I am not using a linter. I am only using babel and webpack. — kojow7, Apr 13 '17 at 18:36
@Jordan Perhaps, but how can I track down the error? The example you link to points to the location of the error message. In my case it does not. — kojow7, Apr 13 '17 at 18:37
My only advice is to use a linter because that should really help you to find such kind of errors. Without code, we cannot help you. — Sulthan, Apr 13 '17 at 18:42
@kojow7 Are your browser's developer tools not reporting any line number for the error? — Jordan Running, Apr 13 '17 at 18:44
@Jordan, it seems to be pointing to line 1242 which is a large cryptic eval function. — kojow7, Apr 13 '17 at 18:54
For those trying this and getting an error about the `loaders` property: From Webpack 4 onwards, use `rules` instead. — paddotk, Feb 19 '20 at 08:12

score 4 · Accepted Answer · edited Apr 23 '17 at 15:07

4

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

Install babel-polyfill npm install --save babel-polyfill

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/

edited Apr 23 '17 at 15:07

Mike Chamberlain

39,692
27
110
158

answered Apr 13 '17 at 19:35

Saral

118
6

Thanks Saral, I have posted a copy of my webpack config file. Does anything stand out to you as incorrect? – kojow7 Apr 13 '17 at 20:40
@kojow7 Have you added babel-polyfill to your webpack config? – Saral Apr 17 '17 at 18:03
Thank you, I did not realize that you had updated your answer. This seems to be getting me closer. I have learned that instead of "latest" that I should use "env", so I am using that. I now get the error: "Unhandled promise rejection ReferenceError: 'fetch' is undefined". – kojow7 Apr 18 '17 at 06:32
@kojow7 Have a look at this http://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined-with-async-await – Saral Apr 18 '17 at 17:59
Thank you, I was able to get the async/await problem fixed with your help in your answer. I will consider my question mostly answered but will wait to see if someone can answer my last question about identifying the line number. I have posted a new question in regards to the Fetch not working: http://stackoverflow.com/questions/43480176/reactjs-with-fetch-on-older-browsers – kojow7 Apr 18 '17 at 19:05
For last part you need source map, check the link in the updated answer. Which webpack version are you using? – Saral Apr 19 '17 at 04:59
I am using Webpack 2.2.1. – kojow7 Apr 20 '17 at 03:30
I have tried using devtool with each the following options: eval, inline-source-map, eval-source-map, and cheap-module-eval-source-map. I get nothing different in the IE11 debugger. They all point to the same eval code section, not an individual line of that section. – kojow7 Apr 20 '17 at 03:56

Rahul Rai · Answer 2 · 2017-04-20T08:25:16.520

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

Maybe my problem is I do not know how to view the .map file in the browser. For example, in IE11, it gives an error and points to the entire eval function, but how do I see what actual line it has a problem with it? I have added devtool: 'source-map', but nothing seems to have changed. I have tried other options for devtool as well: eval, inline-source-map, eval-source-map, and cheap-module-eval-source-map. None of those seem to have any effect on what I am seeing in the browser debugger. — kojow7, Apr 21 '17 at 19:12

React JS does not work in some browsers

2 Answers2