question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Mixed es5/es2015 code with mixin classes causes runtime errors

See original GitHub issue

TypeScript Version: 2.4.1 (but likely anything since 2.2)

When utilising code targeted at ES5 mixed with code targeted at ES6 causes a runtime error when using mixin classes. The real world use case was using a library that was targeted at ES5 for distribution compatibility reasons while downstream code is being targeted at ES2017 because of running in a known limited environment.

Code

Tagged.ts

// @target: es5
export interface Constructor<T> {
    new(...args: any[]): T;
    prototype: T;
}

export default function Tagged<T extends Constructor<{}>>(Base: T) {
    return class extends Base {
        _tag = '';
    }
}

TaggedExample.ts

// @target: es2015
import Tagged from './Tagged';

class Example {
  log() {
    console.log('Hello World!');
  }
}

const TaggedExample = Tagged(Example);

const taggedExample = new TaggedExample(); // Uncaught TypeError: Class constructor Example cannot be invoked without 'new'

Expected behavior:

No run-time errors.

Actual behavior:

A runtime error of Uncaught TypeError: Class constructor Example cannot be invoked without 'new'.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:5
  • Comments:12 (8 by maintainers)

github_iconTop GitHub Comments

4reactions
unionalcommented, Apr 20, 2018

This is very problematic because it means my library (which rely on this) published in es5 cannot be consumed by JavaScript directly at all.

1reaction
mhegazycommented, Sep 5, 2017

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Multiple inheritance and mixin classes in Python
When an object needs a specific feature it just delegates it to another class (either explicitly or implicitly), so the code is written...
Read more >
The Definitive TypeScript 4.8 Guide - SitePen
create , which would cause a runtime error. When the argument is typed as an object , TypeScript will only allow non-primitive values...
Read more >
Mixins - The Modern JavaScript Tutorial
The simplest way to implement a mixin in JavaScript is to make an object with useful methods, so that we can easily merge...
Read more >
Groovy mixin combined with Gradle DefaultTask results in ...
If we now install this Gradle task and execute it, we get the following runtime error: Execution failed for task ':myproject:mytask'. > MyTask....
Read more >
Documentation - Mixins - TypeScript
How Does A Mixin Work? The pattern relies on using generics with class inheritance to extend a base class. TypeScript's best mixin support...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found