28

I'm running a plugin that displays an events calendar. It works great in all browsers except in IE compatibility mode. When that option is checked, the calendar disappears. I believe its a JS error.

IE Debugger Error:

element.qtip({
    content: {
    text: event.description,
    title: {
    text: 'Description',
    }
  },
position: {
    at: 'top right',
    adjust: {
    x: 0, y: 30
   },
},

In my plugin editor this is the code:

element.qtip({
  content: {
  text: event.description,
  title: {
  text: '<?php _e('Description', 'event_espresso'); ?>',
  }
},
position: {
   at: 'top right',
   adjust: {
   x: 0, y: 30
  },
},

I'm not great at debugging so any help would be appreciated.

If it helps, here is the page: http://www.mbausa.org/calendar/

Christian Fredh
  • 899
  • 3
  • 12
  • 29
user1712040
  • 291
  • 1
  • 3
  • 3

7 Answers7

46

Internet Explorer have troubles with trailing commas in objects and arrays;

title: {
    text: 'Description', //<--
}

You probably want:

title: {
    text: 'Description'
}
Björn
  • 29,019
  • 9
  • 65
  • 81
  • 1
    This is unbelievable: both ie8 and ie9 render my gmap3 code without problems but ie7 complain with that error because of the trailing comma. THX you saved my afternoon. – microspino Nov 11 '12 at 14:09
  • 1
    Thank you! This fixed my IE8 compatibility. – Kelly Apr 22 '13 at 21:49
  • 1
    Isn't it in reality because the standards specify that this is invalid code? People should stop complaining in that case, since it's just all the other browsers that don't follow the standards and parse the malformed code. – Mathias Lykkegaard Lorenzen Jun 17 '13 at 07:51
11

There are 2 common causes for this error. Either having a trailing comma when inappropriate, or using a JavaScript reserved word. In your case, you have 2 unnecessary commas. Below is the correct code snippet, with comments where I removed the commas.

element.qtip({
  content: {
  text: event.description,
  title: {
    text: '<?php _e('Description', 'event_espresso'); ?>' // Removed Comma
  }
},
position: {
  at: 'top right',
  adjust: {
    x: 0, y: 30
  } // Removed Comma
},

I actually did a blog post (and video) explaining the error and showing examples and fixes. It can be found here: http://mikemclin.net/fixing-error-script1028-expected-identifier-string-or-number/

Mike McLin
  • 3,627
  • 7
  • 41
  • 49
  • i had this error with parsleyjs remote 2.x -- IE < 10 would crash because a key used was called *default* and it's a reserved word. i changed to 'default' and it works in case you're wondering. also pushed a fix on github for it. – joe Oct 30 '14 at 10:07
  • The irony here is that most linter rulesets for JS & TS enforce the addition of trailing commas.... – Douglas Gaskell Nov 25 '19 at 17:01
8

Old version of IE doesn't support mal-formated JSON String.

You should never put a comma ',' separator when no braces '[', accolades '{' or new object properties come after.

Try :

position: {
at: 'top right',
adjust: {
   x: 0, y: 30
  } // <-- no comma here
},

instead of :

position: {
at: 'top right',
adjust: {
   x: 0, y: 30
  }, // <-- comma here
},
Pierre
  • 1,274
  • 1
  • 9
  • 14
  • Thank you! This worked! I also had to remove the comma after text: '', I can see the calendar now in Compatibility mode but I'm getting a new error: Error: Object doesn't support property or method 'delegate' – user1712040 Oct 01 '12 at 15:25
  • Thanks! I keep forgetting this... Chalk up one more wasted hour for IE! What? Is MicroSoft getting paid on commission? – exoboy Oct 02 '12 at 23:58
6

If you are using Vuex and the issue manifests at the computed hook calling mapState, then the issue is with the spread operator.

},
computed: {
  ...mapState({

Use babel to fix it: https://babeljs.io/docs/en/babel-plugin-proposal-object-rest-spread

igasparetto
  • 1,086
  • 1
  • 12
  • 28
3

Rather than work round compatibility mode you can force non-compatibility mode with...

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

in your <head> tag.

El Ronnoco
  • 11,753
  • 5
  • 38
  • 65
1

Another possible error is due to the reserved keyword being used as hash key.

IE8 errors when defining a Javascript object?

When I use {class:'icon'} I would also get this error. Other IE8 keywords would probably do the same too.

Community
  • 1
  • 1
lulalala
  • 17,572
  • 15
  • 110
  • 169
0

I got this error when trying to import a ES6 module without transpilation through Babel or similar tools.

This row generated the error:

import myES6module from 'my-npm-ES6-module'

The solution is to make sure your workflow actually transpiles it to browser-compatible JavaScript.

Rikard Askelöf
  • 2,762
  • 4
  • 20
  • 24