Current issues

Two recent issues we've observed relatively frequently with our JSX implementation includes the following:

1. Two separate versions of a @types/react can have differing declarations of JSX. This is problematic because the JSX namespace is global and these conflicts are surfaced to users rather than library authors. This makes for a bad experience. (Code sharing between multiple React projects causing TS2403 #17111)
2. Users can't mix and match different JSX implementations within a project. (how can i mix 2 JSX framework in the same project? #15386)

Mitigations

For each of the above issues respectively:

1. Currently, you can use path mapping to ensure that TypeScript has a single reference for whenever libraries import "react" or some such library
2. There is no mitigation I can think of.

Idea

Mohamed Hegazy (@mhegazy) and I have discussed this, and believe it is worth exploring the idea of resolving JSX namespaces from the same module as the factory function itself. In other words, if the JSX factory is React.createElement, TypeScript should attempt to resolve the JSX namespace from the location of the factory function itself.

Code could temporarily be defined that works in both older and newer versions of TypeScript:

namespace JSX {
    // JSX stuff goes in here.
}
export { /*...*/ }

import Temp_JSX = JSX;
declare global {
    import JSX = Temp_JSX;
}

Duplicate JSX declaration errors would still be a problem (and potentially exacerbated), but after several versions we could remove the global augmentations.

Open questions:

1. How does this work with imports/aliases of the JSX factory itself?