microsoft / microsoft/TypeScript

'h' (Preact JSX factory) is not imported when '<>...</>' is used with no other JSX tags

Open
#40,210 3 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug Domain: JSX/TSX
Dominant language
Go
Stars
111k
Forks
14.3k
Avg merge
2d 4h
Merged PRs (30d)
132

Description

I'm using the new jsxFragmentFactory with preact.
It works almost well, but has a problem when no JSX tags other than <></> exist in a file:
An existing import of h (jsxFactory) is removed when transpiled.
This problem occurs with ES modules.

TypeScript Version: 4.0.2

Search Terms: jsx, jsxFactory, jsxFragmentFactory, preact

Code

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ES2015",
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",

    "strict": true,

    "moduleResolution": "node",
    "esModuleInterop": true,

    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

empty.tsx

import { Fragment, h } from 'preact';

export default <></>;

Expected behavior:
The import of h remains.

empty.js

import { Fragment, h } from 'preact';
export default h(Fragment, null);

Actual behavior:
The import of h is removed.

empty.js

import { Fragment } from 'preact';
export default h(Fragment, null);

This problem does not occur when any other tag exists.

empty.tsx

import { Fragment, h } from 'preact';

export default <><div /></>;

empty.js

import { Fragment, h } from 'preact';
export default h(Fragment, null,
    h("div", null));

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by transpiling empty.tsx with the provided tsconfig.json and compare the output for a fragment-only file with the output when a div is included. Trace the JSX fragment transformation and import handling; done means the generated ES module keeps h while emitting h(Fragment, null).

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
compilers
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.