Storybook: [Storybook 6] The "zero-config" TypeScript config doesn't work on our project

[Jack-Works]

Describe the bug
A clear and concise description of what the bug is.

Build error for 2 syntaxes:

1. const enum
2. declare class fields

ERROR in ./src/plugins/FileService/constants.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/jack/workspace/maskbook/src/plugins/FileService/constants.ts: 'const' enums are not supported.
   9 | export const signing = 'https://service.maskbook.com/arweave-remote-signing'
  10 | 
> 11 | export const enum FileRouter {
     |        ^
  12 |     upload = '/upload',
  13 |     uploading = '/uploading',
  14 |     uploaded = '/uploaded',

ERROR in ./src/utils/ObservableMapSet.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/jack/workspace/maskbook/src/utils/ObservableMapSet.ts: TypeScript 'declare' fields must first be transformed by @babel/plugin-transform-typescript.
If you have already enabled that plugin (or '@babel/preset-typescript'), make sure that it runs before any plugin related to additional class features:
 - @babel/plugin-proposal-class-properties
 - @babel/plugin-proposal-private-methods
 - @babel/plugin-proposal-decorators
  2 | // Consider switch to libraries like Mobx if this file become too complex.
  3 | export class ObservableWeakMap<K extends object, V> extends WeakMap<K, V> {
> 4 |     declare __brand: 'Map'
    |     ^^^^^^^^^^^^^^^^^^^^^^
  5 | 
  6 |     event = new Emitter<{ delete: [K]; set: [K, V] }>()
  7 |     delete(key: K) {

To Reproduce

Reproduction: https://github.com/DimensionDev/Maskbook/pull/1568

Expected behavior Build successfully

System:
Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: Linux 5.8 Arch Linux
  Binaries:
    Node: 14.10.0 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.7 - /usr/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.0.21 => 6.0.21
    @storybook/addon-docs: ^6.0.21 => 6.0.21
    @storybook/addon-info: ^5.3.21 => 5.3.21
    @storybook/addon-knobs: ^6.0.21 => 6.0.21
    @storybook/addon-links: ^6.0.21 => 6.0.21
    @storybook/addon-viewport: ^6.0.21 => 6.0.21
    @storybook/addons: ^6.0.21 => 6.0.21
    @storybook/react: ^6.0.21 => 6.0.21

Additional context
Add any other context about the problem here.

[molebox]

Hey! I just came across this very same probelm with regards to the const enum. Not sure what your setup is but just installing this babel plugin solved that one for me: babel-plugin-const-enum

[Jack-Works]

But our main project is using typescript to compile, not babel. I don't like to include babel* as a direct dependency

[shilman]

Storybook's built in typescript support is based on babel, not typescript.

[Jack-Works]

Yeah I know it's based on babel, can the storybook built-in support handle this two things correctly?

[stale[bot]]

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!

[Jack-Works]

Bump🤔

[shilman]

@mrmckeb can you take a look at the babel plugin above and weigh in on the typescript q?

[machinek56]

Had the same issue with const-enum, patched webpack config such as
```
// const isLoader = ruleSetUse => typeof ruleSetUse === 'object';

webpackFinal: async config => {
config.module.rules = config.module.rules.map(rule => {
// Find the rule containing 'babel-loader'
const isBabelRule = Array.isArray(rule.use) && rule.use.find(use => isLoader(use) && use.loader.includes('babel-loader'));
if (isBabelRule) {
const { presets } = rule.use[0].options;
// NOTE: need to add const-enum for support const enum transpilation.
// see https://github.com/dosentmatter/babel-preset-const-enum#usage
if (!presets.includes('const-enum')) {
rule.use[0].options.presets = [...presets, 'const-enum'];
}
return rule;
}
return rule;
});
...
```

Just installing babel-plugin-const-enum not helped.

[Tedko]

Bump

[shilman]

If you want this fixed, please upvote by adding a 👍 to the issue description. We use this to help prioritize!

[ccocoual]

Had the same issue and was able to fix it by adding babel-plugin-const-enum and a .babelrc file in my .storybook folder as below.

{
  "plugins": ["const-enum", "@babel/transform-typescript"]
}