storybook: [Bug]: Zero-Config TypeScript Not Working After Upgrade from v6 to v7

Following up with what I experienced - renaming the .babelrc.json file to babel.config.json as suggested here seemed to help a lot with TypeScript support. I have since ran into unrelated issues and ended up with a different Storybook config, this time based around Next.js.

Experiencing a similar issue in a React monorepo. I ran npx storybook@latest babelrc as suggested in the migration guide linked above, and it generated a .babelrc.json file with these options:

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100
        }
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": []
}

Still getting compilation errors when stories contain any TypeScript syntax, e.g.

SyntaxError: D:\[...]\Anchor.stories.tsx: Unexpected token, expected "," (50:2)
  48 |     }
  49 |   }
> 50 | } as Meta);
     |   ^

With a h/t to @kputnins, here is a full .storybook/main.ts example including TsConfigPathsPlugin to load paths from an alias in tsconfig.json:

import type { StorybookConfig } from "@storybook/react-webpack5";
import { Configuration, RuleSetRule } from "webpack";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";

const config: StorybookConfig = {
  addons: ["@storybook/preset-create-react-app"],
  framework: "@storybook/react-webpack5",
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  typescript: {
    // Removes babel-loader from webpack config
    skipBabel: true,
  },
  webpackFinal: async (config: Configuration) => {
    // Custom rule for ts files
    const tsRule: RuleSetRule = {
      test: /\.(tsx?|jsx?)$/,
      loader: "ts-loader",
      options: {
        transpileOnly: true,
      },
    };

    // tsconfig paths
    if (config.resolve) {
      config.resolve.plugins = [
        ...(config.resolve.plugins || []),
        new TsconfigPathsPlugin({
          extensions: config.resolve.extensions,
        }),
      ];
    }

    return {
      ...config,
      module: {
        ...config.module,
        rules: [...(config.module?.rules || []), tsRule],
      },
    };
  },
};

export default config;

Fwiw I found this issue after trying to automatically upgrade from SB 6 to 7. In my case, the migration seemed to mostly succeed but it never exited.

For anyone stumbling upon this - the override to the storybooks webpack config would be something like this

const config: StorybookConfig = {
    // ...
    typescript: {
        // Removes babel-loader from webpack config
        skipBabel: true,
    },
    webpackFinal: async (config: Configuration) => {
        // Custom rule for ts files
        const tsRule: RuleSetRule = {
            test: /\.(tsx?|jsx?)$/,
            loader: 'ts-loader',
            options: {
                transpileOnly: true,
            },
        };

        return {
            ...config,
            module: { ...config.module, rules: [...(config.module?.rules || []), tsRule] },
        };
    },
};

@shilman When I created this issue I couldn’t get the automigration feature to work (it works now), so I followed the manual migration guide. Looking through the guide I see a reference to “providing your own Babel config”, but my project used tsc instead of Babel. This explains why this was broken for me. Based on the various comments here I’m confident this isn’t a bug and I can continue with Storybook v7 by either migrating to Babel or manipulating the Webpack config with webpackFinal to replace babel-loader with ts-loader.

@joshuajaco Using webpackFinal I logged the existing Webpack config and confirmed that babel-loader is the only TypeScript loader provided by default, but it would be easy to replace this loader with something like ts-loader. https://storybook.js.org/docs/react/builders/webpack#override-the-default-configuration

That’s correct. We changed the way Babel is handled. During the 7.0 automigration if you don’t have a babelrc, the migration tool can automatically create one for you with Typescript support built in. If you don’t choose that option, we don’t support TS.

More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7-exclusively

If I am pasting same stories under “stories” folder (got created while storybook 7 installation), stories are working fine. But I need to keep stories under each component folders(Button, Icon, Checkboax, etc.)