using with(obj) is forbidden in strict mode

[Fuzzyma]

hopscotch.js is stating a 'use strict'; but is still using width(...) which is forbidden in strict mode.
Any chance to get that fixed soon?

[vgrigory]

kudos for raising this issue @Fuzzyma, it also causes issues with deployment/release when passing it through google closure compiler

[arsssen]

also having problems because of "with", please fix

[arsssen]

After closer look at the code it turned out that the whole lib is not using strict mode, "use strict" refers only to "function(context, factory) " function (first 20 lines of code).
When using closure compiler, it enables strict mode for the whole code resulting in errors (there are also some variable asignments without declaration)

[Fuzzyma]

Yes I realized that, too. Most compilers (e.g. ES6 to ES5) add a global strict mode. However - using width should be avoided and can be avoided here

[jared-christensen]

Browserify is not allowing me to compile because of this error.

[timlindvall]

This appears to be an artifact of writing the templates in JST and the resulting output from the JST compiler. Agree that using with is not ideal, so the decision to write bubble HTML in JST may require a revisit.

[ebelliveau]

I'm attempting to package this with grunt and uglify-contrib to no avail; that use strict and with collision is breaking tons of stuff. I see that it's been added to your ES6 refresh milestone, but can't seem to find a timeline on your release schedule... Anyone care to comment?

[rek]

+1 Quite frustrating not being able to just slot this into my Babel build.

[tmaclean-LV]

I made an ES6 template literal version of the bubble_default template, which you all are free to use as well. The obvious bonus here is that you can now more easily modify. Here's the complete code to inject it yourself (assuming you're using ES6 and underscore/lodash):

const template = (data) => {
  const { buttons, i18n, step, tour } = data;
  const optEscape = (str, unsafe) => unsafe ? _.escape(str) : str;
  return `
<div class="hopscotch-bubble-container" style="width: ${step.width}px; padding: ${step.padding}px;">
  ${ tour.isTour ? `<span class="hopscotch-bubble-number">${i18n.stepNum}</span>` : '' }
  <div class="hopscotch-bubble-content">
    ${ step.title !== '' ? `<h3 class="hopscotch-title">${optEscape(step.title, tour.unsafe)}</h3>` : ''}
    ${ step.content !== '' ? `<div class="hopscotch-content">${optEscape(step.content, tour.unsafe)}</div>` : ''}
  </div>
  <div class="hopscotch-actions">
    ${ buttons.showPrev ? `<button class="hopscotch-nav-button prev hopscotch-prev">${i18n.prevBtn}</button>` : '' }
    ${ buttons.showCTA ? `<button class="hopscotch-nav-button next hopscotch-cta">${buttons.ctaLabel}</button>` : '' }
    ${ buttons.showNext ? `<button class="hopscotch-nav-button next hopscotch-next">${i18n.nextBtn}</button>` : '' }
  </div>
  ${ buttons.showClose ? `<button class="hopscotch-bubble-close hopscotch-close">${i18n.closeTooltip}</button>` : '' }
</div>
<div class="hopscotch-bubble-arrow-container hopscotch-arrow">
  <div class="hopscotch-bubble-arrow-border"></div>
  <div class="hopscotch-bubble-arrow"></div>
</div>`;
};
hopscotch.setRenderer(template);

[rbren]

Managed to fix this in a fork of @Benjamin-Dobell's fork:

Benjamin-Dobell#1

If you want a quick fix:
npm install https://github.com/bobby-brennan/hopscotch#strict-compatible

[timlindvall]

Fix merged to master.

[rek]

Thanks a tonne!

[rek]

Can I trouble you for a release as well?

[timlindvall]

Hopefully in the next day or two - need to find some time to create the release and publish it to NPM. Tracking release on #319.

[rek]

Ahh excellent thanks :)

[timlindvall]

Version 0.2.7 has been pushed to master and published to NPM.