Class constructor Transition cannot be invoked without 'new'

[panayotoff]

Hi, I tried to re-create the Highway demo ( from the docs ), but ran into following error: "Class constructor Transition cannot be invoked without 'new'"

Here is the sample project from Highway docs: https://codesandbox.io/s/l5k94z3917

I tried compiling it with Parcel, with Webpack and Rollup, same error.

[wezzou1]

Hi, @panayotov

You have to run done() in your transition.

class CustomTransition extends Highway.Transition {
  // Built-in methods
  in(view, done) {
    console.log("in", view);

    done();
  }

  out(view, done) {
    console.log("out", view);

    done();
  }
}

[panayotoff]

Yes, sure, but the problem is others. If I'm not calling done, the transition will just hang in entering state, not throwing any errors. Even after calling the done() callback, the error still persists: https://codesandbox.io/s/l5k94z3917

It would be great if dummy Highway project ( even simple codesandbox or codepen ) with some fadein/fadeout transitions is provided.

The lib seems promising - Barba.js is no actively maintained/supported, and swup/swupjs may have too little things for complex cases, so Highway fills very sweet spot in pjax libs now.

[Anthodpnt]

Hi @panayotov,

You should take a look at the docs folder that contains Highway website. This is the dummy demo you are asking for :). Does your sandbox transpile your code ? This look like a typical error when you have both untranspiled and transpiled code mixed up.

[panayotoff]

The codesandbox example is just the docs example, trying to run it. Install highway with yarn, add it to ES6 project and try to re-create the example. Yes, it seems like ES6 class try to extend ES5 class, but it seems like it's a lib error, not compiler error.

[Anthodpnt]

@panayotov,

Let us take a look for an easier integration of Highway in Code Sandbox or Codepen. I guess we might miss something to simplify its use for quick demos. For now indeed you cannot use it without a bit of configuration to transpile the whole project that's why you have mixed code. We'll take a closer look this week to simplify this and provide a better package.

Best regards, Anthodpnt

[panayotoff]

Thanks for reply, I will also look into it, once I have more time. The project really looks promising and you've done great work.

[michaelkoelewijn]

Seems i'm late to the party but using the ES5 module instead of the ES6 once seems to fix this error for me.

[Anthodpnt]

Indeed, that’s what the ES5 version is meant for since we released it few month ago.

If you’re using the ES6 version you need to use Webpack for example to transpile Highway into ES5 according to your needs.

Bur we are providing the ES5 version which is the ES6 version transpiled by us with an optimized configuration of Webpack we defined to let developers use Highway as well if they don’t want to bother with the transpilation.

We are keeping those 2 versions in order to let developers handle the transpilation with their own configuration and not rely on ours if they don’t want to.

[Anthodpnt]

Hey guys,

We are now providing in the v2.1.0 a better documentation to install Highway the easiest way possible.

Enjoy! Anthodpnt