Namespaces fail to merge with enum, w/ misleading error message

[m93a]

Bug Report

Current Behavior
Set up a TypeScript repository with Babel and plugin-transform-typescript. Add this code:

Input Code

export enum Foo
{
    a, b, c, d
}

export namespace Foo
{
  export function bar()
  {
    return "bar"
  }
}

Expected behavior/code
It should compile just fine. In TypeScript this just works: Playground Link

Actual behavior
The compiler throws a very misguiding error:

./src/Foo.ts
SyntaxError: Foo.ts: Namespace not marked type-only declare. Non-declarative namespaces are only supported experimentally in Babel. To enable and review caveats see: https://babeljs.io/docs/en/babel-plugin-transform-typescript
  4 | }
  5 | 
> 6 | export namespace Foo
    |                  ^^^
  7 | {
  8 |   export function bar()
  9 |   {

Changing the order of enum and namespace declarations results in this error:

./src/Foo.ts
TypeError: Foo.ts: Duplicate declaration "Foo"
   8 | }
   9 | 
> 10 | export enum Foo
     |             ^^^
  11 | {
  12 |     a, b, c, d
  13 | }

Babel Configuration

• The repository was created with:

yarn create react-app --template=typescript
yarn add @babel/plugin-transform-typescript react-app-rewired customize-cra

Then add this to config-overrides.js:

const {
    override,
    addExternalBabelPlugin
  } = require("customize-cra");

module.exports = override(
    addBabelPlugin([
        "@babel/plugin-transform-typescript",
        { allowNamespaces: true }
    ])
);

Environment

• Babel version(s): v7.9.0
• Node/npm version: v13.13.0
• OS: elementary
• Monorepo: no
• How you are using Babel: via react-scripts, webpack

Walkaround
If you need to keep the exact structure in your project, you can do this:

export enum Foo_
{
    a, b, c, d
}

export type Foo = Foo_

export namespace Foo
{
  export const a = Foo_.a
  export const b = Foo_.b
  export const c = Foo_.c
  export const d = Foo_.d
  export function bar()
  {
    return "bar"
  }
}

(We can't use a destructuring assignment because of #11461)

Proposed Solution
At least the misleading errors should be fixed as soon as possible. Thinking that the plugin loaded incorrectly caused me a lot of pain and several wasted hours. However, the feature itself is important too and I'd really love to see it implemented.

[babel-bot]

Hey @m93a! 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]

The problem is that you have two instances of the typescript plugin: the one enabled by CRA, and the one added by you. The one enabled by CRA finds namespace and throws.

I think the CRA Babel preset supports a typescript: false option to disable their instance of the plugin.

[m93a]

Hey,
Thank you for your reply. Why do I have two instances of the typescript plugin? CRA also compiles TypeScript using plugin-transform-typescript? I don't see any CRA preferences that could help me disable TypeScript in an already created project. Could you please help me out with this?

EDIT: Isn't it weird that interface+namespace merging works just fine, but enum+namespace doesn't?

[liuxingbaoyu]

Seems to have been fixed.