[@babel/preset-typescript]`alias` will be truncated in `import funcA as alias` if `alias` is not used in source code

Bug Report

• I would like to work on a fix!

Current behavior

• Given unit test below: https://github.com/Few-UI/few/blob/a40754cd6cd2051c6d7b1a5d21e65f17153120cb/test/react/react.test.tsx#L19

import {
    useEffect,
    useState,
    createElement as h,
    memo
} from 'react';
// side effect in @babel/preset-typescript, if h is not mentioned the as will be truncated
h;

If I remove the hard-coded h, which means there is an import alias and no reference, the alias will be truncated as typescript type ‘as’ and the test will fail:

    ReferenceError: h is not defined

      345 | 
      346 |     it( 'Test React.memo behavior', async() => {
    > 347 |         render( <MemoContainer />, fixture.container );
          |         ^

• REPL, Codesandbox, or GitHub Repo helps!

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: babel.config.js

{
        // '^.+\\.tsx?$': 'ts-jest'
        // TODO: switch to babel-jest later
        '^.+\\.tsx?$': [ 'babel-jest', {
                exclude: 'node_modules/**',
                presets: [
                    [ '@babel/preset-env', {
                        // modules: 'commonjs'
                        targets: {
                            // browsers: [ 'last 2 versions', 'ie >= 11' ]
                            browsers: [ 'last 1 chrome versions' ]
                        }
                    } ],
                    // https://github.com/facebook/create-react-app/blob/f5c3bdb65480f93b2d4a4c2f3214fc50753de434/packages/babel-preset-react-app/create.js
                    [ '@babel/preset-react', {
                        // pragma: 'this.$createElement'
                        // align with vue
                        pragma: 'h',
                        pragmaFrag: 'h.Fragment',
                        // development: true,
                        useBuiltIns: true
                    } ],
                    '@babel/preset-typescript'
                ]
                // babelHelpers: 'bundled',
                // extensions: [ '.js', '.jsx', '.ts', '.tsx' ]
        } ]
    }

Environment

git clone https://github.com/Few-UI/few
# remove L19 in react.test.ts
npm i
npm test

• Babel version(s): [7.10.2]
• Node/npm version: [e.g. Node v12.18.2/npm 6.14.5]
• OS: [e.g. OSX 10.15.5]
• Monorepo: [no]
• How you are using Babel: [jest babel loader]

Possible Solution Is is possible to get a fix or workaround is fine? Thanks!

Additional context Add any other context about the problem here. Or a screenshot if applicable

[nicolo-ribaudo]

If that’s a type-only import, you should use import type { ComponentDef } from './types'; to make Babel remove it.

[JLHwung]

As a workaround, you can set onlyRemoveTypeImports: true in preset-typescript.

['@babel/preset-typescript', { onlyRemoveTypeImports: true }]