[Bug]: import type {} from 'some-module' results in invalid typescript

[nicojs]

💻

• Would you like to work on a fix?

How are you using Babel?

Programmatic API (babel.transform, babel.parse)

Input code

import type { } from 'some-module';

Configuration file name

No response

Configuration

No configuration file

Current and expected behavior

Using this code:

const { parseAsync } = require("@babel/core");
const generate = require("@babel/generator").default;

async function main() {
  const parsed = await parseAsync('import type {} from "some-module";', {
    filename: "main.ts",
    presets: [require.resolve("@babel/preset-typescript")],
    plugins: [],
  });
  console.log(
    generate(parsed, {sourceMaps: false}).code
  );
}

main().catch(console.error);

Results in: import type "some-module";

Which is invalid typescript.

Environment

• Babel: 7.16.12

Possible solution

I've noticed that the AST for:

import type {} from "some-module";

And

import type "some-module";

is the exact same. See https://astexplorer.net/#/gist/3a6d7dc99689e175f667747004a015f4/2c079662c137fb0f3af1be0f7c04920a9d6a199a

I see 3 solutions:

1. Output generate code for the AST as import type {} from "some-module";
2. Add AST properties so we know the difference between the 2
3. Add support for import type "some-module"; to typescript (and flow script?)

Additional context

This got reported in StrykerJS: stryker-mutator/stryker-js#3386

We're using babel to parse and output files as is, after which tsc might need to run.

[babel-bot]

Hey @nicojs! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[nicolo-ribaudo]

We should always print {} in this case.

[The-x-Theorist]

I'd like to work on this issue, but how can we write test for this?

[JLHwung]

@The-x-Theorist You can add a test in packages/babel-generator/test/fixtures/typescript, the input is import type { } from 'some-module'; and the output should be the same.

[The-x-Theorist]

Do we have to change the AST for type only importSpecifier to add the braces in the generator?

[JLHwung]

I don't think we need to change the AST. We can print braces when node.importKind is "type" even if specifiers.length is 0:

babel/packages/babel-generator/src/generators/modules.ts

Line 204 in e06c099

if (specifiers.length) {

May also check if we should handle this issue in typeof import and export type {} from "some-module".

[The-x-Theorist]

@JLHwung Can you suggest an example for typeof import to check?

[nicolo-ribaudo]

node.importKind === "typeof", when using import typeof U from "x"; with flow.