'const' enums are not supported in storybook when using my Typescript Components

user_1022330 0
Viewed 2010

I have a typescript component with an enum :

  const enum blah {
    one = "one",
    two = "two"
  }

Without the typescript enum, the typscript component will compile and display correctly, but with the enum in the code it will not.

How do I make storybook understand enums in typescript?

storybook typescript
1 Answers

Storybook is using Babel for Typescript transpiling.

Using ts-loader

Customizing the storybook webpack configuration and using ts-loader instead of Babel did it for me. The rest of my project is also setup with ts-loader so you might have to look into how to setup the project with it.

// .storybook/main.js

module.exports = {
  // ... other configuration here

  // Customize the webpack configuration
  webpackFinal: async(config) => {
    // We want to use ts-loader for tsx files
    config.module.rules.push({
      test: /\.tsx?$/,
      use: 'ts-loader',
    });

    return config;
  }
};

Using Babel

I wasn't able to make it work with Babel, but several comments on this issue suggest to use babel-preset-const-enum.

Sources

user_17068460
Related