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.

Mitosis JSX types are not properly mapped

See original GitHub issue

Originally from

For this input:

import { HTMLAttributes } from "react";

export const headingSizes = [1, 2, 3, 4, 5, 6];

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  size: typeof headingSizes[number];

export default function Heading(props: HeadingProps) {
  return <div />

the output does not preserve the import { HTMLAttributes } from "react"; import

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:3
  • Comments:16 (6 by maintainers)

github_iconTop GitHub Comments

PatrickJScommented, Jun 8, 2022

I saw @kylecordes use this. can we update the imports to remove the need for dist/src

import '';
samijabercommented, Dec 21, 2022

Thanks @R-Bower, that’s informative. You’re right, we need a way to map the Mitosis JSX types to the correct framework types, or folks will run into many type-related issues.

There is definitely a way to transform the import to that of React’s JSX types, it will look something like this:

Step 1 - Identify every place where the JSX types are used

in the JSX parser, we will need to update the logic that parses import declarations here:

such that: if we see a JSX import coming from or, we want to store that import (currently we ignore all mitosis imports). Might be good to normalize all possible variations (regular import, type import, import from different paths) into 1 single variant: import type { JSX } from '';

We will also need to

Step 2 - transform imports

This might be the best place to make such a change:

This import transform code will run for both mitosis components (.lite.tsx) and plain JS/TS files. If will want to replace the normalized import type { JSX } from ''; import statement to whatever makes sense for each given framework. For React, It will be easiest to convert the import to:

type JSX  = React;

This will avoid the need to replace every JSX.* within the code with React.. This assumes that import React from 'react'; already exists somewhere in the code (which it does as we always add it to react generators). But if it somehow doesn’t, we could add a check and add it ourselves.

The solution will be different for each framework, but should roughly follow this same pattern of changes.

Read more comments on GitHub >

github_iconTop Results From Across the Web

BUG: Mitosis does not camelCase HTML attributes in React
We want to go to the blockToReact function, and identify blocks that are native HTML elements, and rename any json.bindings or ...
Read more >
Intro to Mitosis: The universal reactive transformer - InfoWorld
Mitosis is the JavaScript compiler that lets developers "write once, run anywhere," then compile to Angular, Vue, Svelte, and more.
Read more >
Documentation - JSX - TypeScript
JSX is an embeddable XML-like syntax. It is meant to be transformed into valid JavaScript, though the semantics of that transformation are ...
Read more >
Mitosis - Molecular Biology of the Cell - NCBI Bookshelf - NIH
The segregation of the replicated chromosomes is brought about by a complex cytoskeletal machine with many moving parts—the mitotic spindle.
Read more >
Typescript type issue in map function of mixed types react
hmmm, obviously I appreciate the help, but I am not sure I really like either of these solutions. The array will always contain...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found