[@babel/preset-typescript] Namespace alias (native TS feature) is not supported

[alker0]

Bug Report

• I would like to work on a fix!

import RenamedModule = OriginalModule is native Typescript's feature for creating module alias but @babel/preset-typescript does not allow this syntax.

Current behavior

@babel/preset-typescript gives an error.

Error: `import =` is not supported by @babel/plugin-transform-typescript
Please consider using `import <moduleName> from '<moduleName>';` alongside Typescript's --allowSyntheticDefaultImports option.

Input Code

declare module LongNameModule {
  export type SomeType = number;
}
import AliasModule = LongNameModule;

const some: AliasModule.SomeType = 3;
console.log(some);

Expected behavior

It outputs: 3.

Using tsc and ts-node, it is compiled as expected.

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

• Filename: babel.config.js

{
  presets: [
    [
      '@babel/env',
      {
        modules: false,
        targets: {
          esmodules: true,
        },
      },
    ],
    [
      '@babel/typescript',
      {
        allowDeclareFields: true,
      },
    ],
  ],
};

Environment

• Babel version: v7.12.3
• Node/npm version: Node 14/yarn 1.22.10
• OS: alpine linux (in docker)
• Monorepo: no
• How you are using Babel: cli

Possible Solution

I have no idea.

[babel-bot]

Hey @alker0! 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."

[mischnic]

See https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats:

This plugin does not support export = and import =, because those cannot be compiled to ES.next. These are a TypeScript only form of import/export.

Workarounds:

• Use the plugin https://www.npmjs.com/package/babel-plugin-replace-ts-export-assignment to transform export =.
• Convert to using export default and export const, and import x, {y} from "z".

[alker0]

This input code is in only one file.

// some-file.ts
declare module LongNameModule {
  export type SomeType = number;
}

import AliasModule = LongNameModule; // this is also in some-file.ts

const some: AliasModule.SomeType = 3;
console.log(some);

I tried this command:
tsc --target ESNEXT --module ESNext --skipLibCheck --outDir dist/ some-file.ts
And that typescript file is compiled into the following code:

// some-file.js
const some = 3;
console.log(some);

This is just to create module name alias in same file, and it also works when target is ESNext.

It does not seem to be same feature that is import = for importing external commonJS modules.

I want to use this feature for development of the browser scripts. Can this preset not support this feature?

[alker0]

This is the official documentation: https://www.typescriptlang.org/docs/handbook/namespaces.html#aliases

Not to be confused with the import x = require("name") syntax used to load modules, this syntax simply creates an alias for the specified symbol. You can use these sorts of imports (commonly referred to as aliases) for any kind of identifier, including objects created from module imports.

The babel documentation @mischnic quoted seems to mention loading modules, but this is not what I mention.

I should have called this feature "Namespace alias" rather than "Module alias".

[nicolo-ribaudo]

This is something that we can support. When we wrote those docs, what we wanted to disallow was import foo = require("...") and export =. import foo = bar is a different feature that has nothing to do with ESM (it just re-uses the keyword).

[orty]

Hi,

Is there any news regarding this ? I looked around for a plugin to use as a workaround until Babel support namespace aliases but no luck :(

[ilhanali]

I'm struggling with the same problem right now.

[colinaaa]

I would like to work on this!