Enable non-declarative namespaces in Babel

[tbelch-at-eHealth-Tec]

Describe the bug
I am using namespaces to group types and classes with TypeScript in my project, like this...

export namespace Preparing {
  export class Idle extends State {
    readonly initialValues?: Partial<FormValues>;

    constructor(initialValues?: Partial<FormValues>, history?: ReadonlyArray<State>) {
      super(Type.PreparingIdle, history);
      this.initialValues = initialValues;
    }

    catch(errorMessage: string): Preparing.Errored {
      return new Preparing.Errored(errorMessage, this.nextHistory());
    }
  }
}

As described here I have a .babelrc file in the root of my project with the following content:

{
  "presets": [
    "react-app",
    [
      "@babel/preset-typescript",
      {
        "allowNamespaces": true
      }
    ]
  ]
}

This babel configuration enables non-declarative namespaces in my react application, but it doesn't work for storybook. I receive the following error:

ERROR in .../create-prescription.state.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: .../create-prescription.state.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
> export namespace Preparing {
              ^^^^^^^^^
     export class Idle extends State {

If I copy .babelrc to storybook I receive the following error:

ERROR in ./.storybook/generated-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "/home/tobias/workspace/erezept/arzt-frontend/node_modules/babel-preset-react-app/index.js",
    "dirname": "/home/tobias/workspace/erezept/arzt-frontend",
    "ownPass": false,
    "file": {
      "request": "react-app",
      "resolved": "/home/tobias/workspace/erezept/arzt-frontend/node_modules/babel-preset-react-app/index.js"
    }
  },

Expected behavior
Well, either way, based on the documentation I'd expect storybook to pick up the .babelrc and enable non-declarative namespaces.

System:

System:
    OS: Linux 4.19 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
  Binaries:
    Node: 13.12.0 - /home/linuxbrew/.linuxbrew/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.4 - /home/linuxbrew/.linuxbrew/bin/npm
  npmPackages:
    @storybook/addon-actions: ^5.3.18 => 5.3.18 
    @storybook/addon-links: ^5.3.18 => 5.3.18 
    @storybook/addons: ^5.3.18 => 5.3.18 
    @storybook/preset-create-react-app: ^2.1.1 => 2.1.1 
    @storybook/react: ^5.3.18 => 5.3.18

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[timhwang21]

@tbelch-at-eHealth-Tec if you're interested, I did some digging here: #12745 (comment)

The short term fix appears to be to mirror / symlink your Babel config into .storybook/.

[pzi]

In case anyone is looking for alternative solutions, I added the following to main.js to get namespaces working (based on custom config file):

  babel: async (options) => {
    const typescriptPreset = '@babel/preset-typescript';
    const presetIndex = options.presets.findIndex(
      (preset) =>
        (typeof preset === 'string' && preset.match(typescriptPreset)) ||
        (Array.isArray(preset) &&
          preset[0] &&
          preset[0].match(typescriptPreset))
    );

    if (presetIndex >= 0) {
      const oldPreset = options.presets[presetIndex];
      if (Array.isArray(oldPreset) && oldPreset.length >= 2) {
        const title = oldPreset[0];
        const config = oldPreset[1];
        options.presets[presetIndex] = [
          title,
          {
            ...config,
            allowNamespaces: true,
          },
        ];
      } else {
        options.presets[presetIndex] = [
          oldPreset,
          {
            allowNamespaces: true,
          },
        ];
      }
    }

    return {
      ...options,
      // any extra options you want to set
      presets: [...options.presets],
    };
  },