Problem in IE with webpack and 1.25.2+

[sschueller]

I am no longer able to get shariff to work with my webpack 2 (tried 3 as well) setup in IE11 (11.1480.14393.0) since version 1.25.2. It compiles fine and works fine in chrome/firefox/safari but not in IE. In order to have webpack working in IE11 I use ES5 and ES6 shims (https://github.com/paulmillr/es6-shim/).

Sadly the error I get in IE is not helpful enough to locate what is broken. All I know is that shariff works fine with version 1.24.1 but not with anything after.

Here is what IE gives me if that is of any help:

SyntaxError: Syntaxfehler
   {
      [functions]: ,
      __proto__: { },
      description: "Syntaxfehler",
      message: "Syntaxfehler",
      name: "SyntaxError",
      number: -2146827286,
      stack: "SyntaxError: Syntaxfehler
   at Anonymous function (http://localhost/compiled/shariff-npm.bundle.js:69:1)
   at __webpack_require__ (http://localhost/compiled/index-eec162faa7409db89b3475cd39bb663370611821.bundle.js:50:12)
   at Anonymous function (eval code:7:5)
   at g (http://localhost/app_dev.php/js/c08e438_es6-shim.0.35.3.min_4.js:11:1693)
   at Anonymous function (http://localhost/app_dev.php/js/c08e438_es6-shim.0.35.3.min_4.js:11:1625)"
   }

I have the following in my webpack module:

var $ = require('@npm/jquery');

require.ensure(['@npm/shariff/src/js/shariff'], function (require) {
    var shariff = require('@npm/shariff/src/js/shariff');
    var locale = $('html').attr('lang');

    $('div[data-webpack-module="socialbar"]').each(function () {
        // load shariff with language
        new shariff(this, {
            lang: locale.substring(0, 2)
        });    
    });

}, 'shariff-npm');

Line 69 in shariff-npm.bundle.js

eval("/* WEBPACK VAR INJECTION */(function(global) {\n\n// require('babel-polyfill')\n\nconst $ = __webpack_require__(90)\nconst services = __webpack_require__(91)\nconst url = __webpack_require__(49)\n\n// Defaults may be overridden either by passing \"options\" to Shariff constructor\n// or by setting data attributes.\nconst Defaults = {\n  theme: 'color',\n\n  // URL to backend that requests social counts. null means \"disabled\"\n  backendUrl: null,\n\n  // Link to the \"about\" page\n  infoUrl: 'http://ct.de/-2467514',\n\n  // localisation: \"de\" or \"en\"\n  lang: 'de',\n\n  // fallback language for not fully localized services\n  langFallback: 'en',\n\n  mailUrl: function() {\n    var shareUrl = url.parse(this.getURL(), true)\n    shareUrl.query.view = 'mail'\n    delete shareUrl.search\n    return url.format(shareUrl)\n  },\n\n  mailBody: function() { return this.getURL() },\n\n  // Media (e.g. image) URL to be shared\n  mediaUrl: null,\n\n  // horizontal/vertical\n  orientation: 'horizontal',\n\n  // a string to suffix current URL\n  referrerTrack: null,\n\n  // services to be enabled in the following order\n  services: ['twitter', 'facebook', 'googleplus', 'info'],\n\n  title: function() {\n    return $('head title').text()\n  },\n\n  twitterVia: null,\n\n  flattrUser: null,\n\n  flattrCategory: null,\n\n  // build URI from rel=\"canonical\" or document.location\n  url: function() {\n    var url = global.document.location.href\n    var canonical = $('link[rel=canonical]').attr('href') || this.getMeta('og:url') || ''\n\n    if (canonical.length > 0) {\n      if (canonical.indexOf('http') < 0) {\n        canonical = global.document.location.protocol + '//' + global.document.location.host + canonical\n      }\n      url = canonical\n    }\n\n    return url\n  }\n}\n\nclass Shariff {\n  constructor(element, options) {\n    // the DOM element that will contain the buttons\n    this.element = element\n\n    // Ensure elemnt is empty\n    $(element).empty()\n\n    this.options = $.extend({}, Defaults, options, $(element).data())\n\n    // filter available services to those that are enabled and initialize them\n    this.services = Object.keys(services)\n      .filter(service => this.isEnabledService(service))\n      .sort((a, b) => {\n        let services = this.options.services\n        return services.indexOf(a) - services.indexOf(b)\n      })\n      .map(serviceName => services[serviceName](this))\n\n    this._addButtonList()\n\n    if (this.options.backendUrl !== null) {\n      this.getShares(this._updateCounts.bind(this))\n    }\n  }\n\n  isEnabledService(serviceName) {\n    return this.options.services.indexOf(serviceName) > -1\n  }\n\n  $socialshareElement() {\n    return $(this.element)\n  }\n\n  getLocalized(data, key) {\n    if (typeof data[key] === 'object') {\n      if (typeof data[key][this.options.lang] === 'undefined') {\n        return data[key][this.options.langFallback]\n      } else {\n        return data[key][this.options.lang]\n      }\n    } else if (typeof data[key] === 'string') {\n      return data[key]\n    }\n    return undefined\n  }\n\n  // returns content of <meta name=\"\" content=\"\"> tags or '' if empty/non existant\n  getMeta(name) {\n    var metaContent = $(`meta[name=\"${name}\"],[property=\"${name}\"]`).attr('content')\n    return metaContent || ''\n  }\n\n  getInfoUrl() {\n    return this.options.infoUrl\n  }\n\n  getURL() {\n    return this.getOption('url')\n  }\n\n  getOption(name) {\n    var option = this.options[name]\n    return (typeof option === 'function') ? option.call(this) : option\n  }\n\n  getTitle() {\n    let title = this.getOption('title') || this.getMeta('DC.title')\n    let creator = this.getMeta('DC.creator')\n    if (title && creator) title = `${title} - ${creator}`\n    return title\n  }\n\n  getReferrerTrack() {\n    return this.options.referrerTrack || ''\n  }\n\n  // returns shareCounts of document\n  getShares(callback) {\n    var baseUrl = url.parse(this.options.backendUrl, true)\n    baseUrl.query.url = this.getURL()\n    delete baseUrl.search\n    return $.getJSON(url.format(baseUrl), callback)\n  }\n\n  // add value of shares for each service\n  _updateCounts(data, status, xhr) {\n    if (!data) return\n    $.each(data, (serviceName, value) => {\n      if (!this.isEnabledService(serviceName)) {\n        return\n      }\n      if (value >= 1000) {\n        value = Math.round(value / 1000) + 'k'\n      }\n      $(this.element)\n        .find(`.${serviceName} a`)\n        .append($('<span/>').addClass('share_count').text(value))\n    })\n  }\n\n  // add html for button-container\n  _addButtonList() {\n    var $buttonList = $('<ul/>').addClass([\n      'theme-' + this.options.theme,\n      'orientation-' + this.options.orientation,\n      'col-' + this.options.services.length\n    ].join(' '))\n\n    // add html for service-links\n    this.services.forEach(service => {\n      var $li = $('<li/>').addClass(`shariff-button ${service.name}`)\n      var $shareText = $('<span/>')\n        .addClass('share_text')\n        .text(this.getLocalized(service, 'shareText'))\n\n      var $shareLink = $('<a/>')\n        .attr('href', service.shareUrl)\n        .append($shareText)\n\n      if (typeof service.faName !== 'undefined') {\n        $shareLink.prepend($('<span/>').addClass(`fa ${service.faName}`))\n      }\n\n      if (service.popup) {\n        $shareLink.attr('data-rel', 'popup')\n      } else if (service.blank) {\n        $shareLink.attr('target', '_blank')\n      }\n      $shareLink.attr('title', this.getLocalized(service, 'title'))\n\n      // add attributes for screen readers\n      $shareLink.attr('role', 'button')\n      $shareLink.attr('aria-label', this.getLocalized(service, 'title'))\n\n      $li.append($shareLink)\n\n      $buttonList.append($li)\n    })\n\n    // event delegation\n    $buttonList.on('click', '[data-rel=\"popup\"]', function(e) {\n      e.preventDefault()\n\n      var url = $(this).attr('href')\n\n      // if a twitter widget is embedded on current site twitter's widget.js\n      // will open a popup so we should not open a second one.\n      if (url.match(/twitter\\.com\\/intent\\/(\\w+)/)) {\n        var w = global.window\n        if (w.__twttr && w.__twttr.widgets && w.__twttr.widgets.loaded) {\n          return\n        }\n      }\n\n      global.window.open(url, '_blank', 'width=600,height=460')\n    })\n\n    this.$socialshareElement().append($buttonList)\n  }\n}\n\nmodule.exports = Shariff\n\n// export Shariff class to global (for non-Node users)\nglobal.Shariff = Shariff\n\n$(function() {\n  // initialize .shariff elements\n  $('.shariff').each(function() {\n    if (!this.hasOwnProperty('shariff')) {\n      this.shariff = new Shariff(this)\n    }\n  })\n})\n\n/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(36)))\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/shariff/src/js/shariff.js\n// module id = 67\n// module chunks = 15\n\n//# sourceURL=webpack:///./node_modules/shariff/src/js/shariff.js?");

Any help or suggestions on what I can do to find the issue would be appreciated.

[sschueller]

Problem persists in 2.0.4

[joseph-parsley]

Any update on this? I'm experiencing the same issue.

[liayn]

related to #311

[jinnyMcKindy]

Found solution. Change your webpack.config to this:

const path = require('path');
module.exports = {
  devtool: "source-map",
  entry: ['babel-polyfill', path.resolve(__dirname, './yourjs.js')],
  mode: 'production',
  output: {
    path: __dirname+'/draft.iml.ru/static/main/js/',
    filename: 'yout.js'
  }
};

You have to to add devtool : "source-map" option.

[digitalgopnik]

I will close here since IE EOL is June 14, 2022