Bug Report

I would like to create my own JSX-Factory which references this, for example this.createElement.

🔎 Search Terms

Custom JSX factory, this in jsx factory

🕗 Version & Regression Information

Tested on Version 4.7.2 and Version 4.8.0-dev.20220524 (@next).

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about JSX

⏄1�7 Playground Link

Sadly, playground does not support the jsxFactory tsconfig field, thus this can't be shown in playground.

💻 Code

{
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "this.customCreateElement"
    }
}

class ExampleComponent {
    render() {
        return <app-example>
            <app-child></app-child>
        </app-example>;
    }

    customCreateElement(tagName: string, attributes: { [name: string]: any }, ...children: []) {
        // ... create something in the dom or whatever
    }
}

🙁 Actual behavior

TypeScripts emits the correct code with the this references (this.customCreateElement("app-example", null, this.customCreateElement("app-child", null));), but still throws an error:

index.tsx:3:17 - error TS2304: Cannot find name 'this'.
3         return <app-example>
                  ~~~~~~~~~~~

index.tsx:4:14 - error TS2304: Cannot find name 'this'.
4             <app-child></app-child>
               ~~~~~~~~~

Found 2 errors in the same file, starting at: index.tsx:3

🙂 Expected behavior

The output stays the same - but there is no error message.