Closed
Description
Current issues
Two recent issues we've observed relatively frequently with our JSX implementation includes the following:
- 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) - 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:
- Currently, you can use path mapping to ensure that TypeScript has a single reference for whenever libraries import
"react"
or some such library - There is no mitigation I can think of.
Idea
@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:
- How does this work with imports/aliases of the JSX factory itself?