<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current Behavior</strong><br>
Set up a TypeScript repository with Babel and <a href="https://babeljs.io/docs/en/babel-plugin-transform-typescript/" rel="nofollow">plugin-transform-typescript</a>. Add this code:</p>
<p dir="auto"><strong>Input Code</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export enum Foo
{
    a, b, c, d
}

export namespace Foo
{
  export function bar()
  {
    return &quot;bar&quot;
  }
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">enum</span> <span class="pl-smi">Foo</span>
<span class="pl-kos">{</span>
    <span class="pl-c1">a</span><span class="pl-kos">,</span> <span class="pl-c1">b</span><span class="pl-kos">,</span> <span class="pl-c1">c</span><span class="pl-kos">,</span> <span class="pl-c1">d</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">namespace</span> <span class="pl-smi">Foo</span>
<span class="pl-kos">{</span>
  <span class="pl-k">export</span> <span class="pl-k">function</span> <span class="pl-en">bar</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-s">"bar"</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Expected behavior/code</strong><br>
It should compile just fine. In TypeScript this just works: <a href="https://www.typescriptlang.org/play/?ssl=1&amp;ssc=1&amp;pln=27&amp;pc=1#code/KYDwDg9gTgLgBMAdgVwLZwGIQgWAFADe+cJcAhgDRwBGVAxlQCb4C+++oksciZqwAZzBk6wTNnxE8JTtHgAzZIjowAlhEQ0yUABQBKYnCmk4UYDGRRNAInnZrhtnifs8s7r35CRYgELbJQ3cFJRV1TWptfUNjUjMLKzhrSKgHaTgnFzdwOQQUdH8oQPSSShp6JlZ8IA" rel="nofollow">Playground Link</a></p>
<p dir="auto"><strong>Actual behavior</strong><br>
The compiler throws a <strong>very misguiding</strong> error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="./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 | 
&gt; 6 | export namespace Foo
    |                  ^^^
  7 | {
  8 |   export function bar()
  9 |   {"><pre class="notranslate"><code class="notranslate">./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 | 
&gt; 6 | export namespace Foo
    |                  ^^^
  7 | {
  8 |   export function bar()
  9 |   {
</code></pre></div>
<p dir="auto">Changing the order of <code class="notranslate">enum</code> and <code class="notranslate">namespace</code> declarations results in this error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="./src/Foo.ts
TypeError: Foo.ts: Duplicate declaration &quot;Foo&quot;
   8 | }
   9 | 
&gt; 10 | export enum Foo
     |             ^^^
  11 | {
  12 |     a, b, c, d
  13 | }"><pre class="notranslate"><code class="notranslate">./src/Foo.ts
TypeError: Foo.ts: Duplicate declaration "Foo"
   8 | }
   9 | 
&gt; 10 | export enum Foo
     |             ^^^
  11 | {
  12 |     a, b, c, d
  13 | }
</code></pre></div>
<p dir="auto"><strong>Babel Configuration</strong></p>
<ul dir="auto">
<li>The repository was created with:</li>
</ul>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="yarn create react-app --template=typescript
yarn add @babel/plugin-transform-typescript react-app-rewired customize-cra"><pre class="notranslate">yarn create react-app --template=typescript
yarn add @babel/plugin-transform-typescript react-app-rewired customize-cra</pre></div>
<p dir="auto">Then add this to <code class="notranslate">config-overrides.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const {
    override,
    addExternalBabelPlugin
  } = require(&quot;customize-cra&quot;);

module.exports = override(
    addBabelPlugin([
        &quot;@babel/plugin-transform-typescript&quot;,
        { allowNamespaces: true }
    ])
);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">{</span>
    override<span class="pl-kos">,</span>
    addExternalBabelPlugin
  <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"customize-cra"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-en">override</span><span class="pl-kos">(</span>
    <span class="pl-en">addBabelPlugin</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
        <span class="pl-s">"@babel/plugin-transform-typescript"</span><span class="pl-kos">,</span>
        <span class="pl-kos">{</span> <span class="pl-c1">allowNamespaces</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span>
    <span class="pl-kos">]</span><span class="pl-kos">)</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Environment</strong></p>
<ul dir="auto">
<li>Babel version(s): v7.9.0</li>
<li>Node/npm version: v13.13.0</li>
<li>OS: elementary</li>
<li>Monorepo: no</li>
<li>How you are using Babel: via <code class="notranslate">react-scripts</code>, <code class="notranslate">webpack</code></li>
</ul>
<p dir="auto"><strong>Walkaround</strong><br>
If you need to keep the exact structure in your project, you can do this:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="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 &quot;bar&quot;
  }
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">enum</span> <span class="pl-smi">Foo_</span>
<span class="pl-kos">{</span>
    <span class="pl-c1">a</span><span class="pl-kos">,</span> <span class="pl-c1">b</span><span class="pl-kos">,</span> <span class="pl-c1">c</span><span class="pl-kos">,</span> <span class="pl-c1">d</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">type</span> <span class="pl-smi">Foo</span> <span class="pl-c1">=</span> <span class="pl-smi">Foo_</span>

<span class="pl-k">export</span> <span class="pl-k">namespace</span> <span class="pl-smi">Foo</span>
<span class="pl-kos">{</span>
  <span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-smi">Foo_</span><span class="pl-kos">.</span><span class="pl-c1">a</span>
  <span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">b</span> <span class="pl-c1">=</span> <span class="pl-smi">Foo_</span><span class="pl-kos">.</span><span class="pl-c1">b</span>
  <span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">c</span> <span class="pl-c1">=</span> <span class="pl-smi">Foo_</span><span class="pl-kos">.</span><span class="pl-c1">c</span>
  <span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">d</span> <span class="pl-c1">=</span> <span class="pl-smi">Foo_</span><span class="pl-kos">.</span><span class="pl-c1">d</span>
  <span class="pl-k">export</span> <span class="pl-k">function</span> <span class="pl-en">bar</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-s">"bar"</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">(We can't use a destructuring assignment because of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="604329925" data-permission-text="Title is private" data-url="https://github.com/babel/babel/issues/11461" data-hovercard-type="issue" data-hovercard-url="/babel/babel/issues/11461/hovercard" href="https://github.com/babel/babel/issues/11461">#11461</a>)</p>
<p dir="auto"><strong>Proposed Solution</strong><br>
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.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/TheLarkInn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/TheLarkInn">@TheLarkInn</a> asked, and it seems like a discussion worth having.</p>
<p dir="auto">Leaving it off by default would lead to people being more likely to get errors in things like Node by default, but it would potentially make the workflow easier for people using Webpack, since it's usually easier to add additional plugins than it is to remove them, since opting out first is more verbose, so people could do</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  presets: ['@babel/env'],
  env: {
    test: {
      plugins: ['@babel/transform-modules-commonjs'],
    }
  }
}"><pre class="notranslate"><code class="notranslate">{
  presets: ['@babel/env'],
  env: {
    test: {
      plugins: ['@babel/transform-modules-commonjs'],
    }
  }
}
</code></pre></div>
<p dir="auto">which is a lot nicer than</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  presets: [['@babel/env', { modules: false }]],
  env: {
    test: {
      plugins: ['@babel/transform-modules-commonjs'],
    }
  }
}"><pre class="notranslate"><code class="notranslate">{
  presets: [['@babel/env', { modules: false }]],
  env: {
    test: {
      plugins: ['@babel/transform-modules-commonjs'],
    }
  }
}
</code></pre></div>
<p dir="auto">or even</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  presets: [['@babel/env', { modules: false }]],
  env: {
    test: {
      presets: ['@babel/env'],
    }
  }
}"><pre class="notranslate"><code class="notranslate">{
  presets: [['@babel/env', { modules: false }]],
  env: {
    test: {
      presets: ['@babel/env'],
    }
  }
}
</code></pre></div>
<p dir="auto">at least in my view?</p>