storybook: [6.0.0-beta.2] Storybook v6 not working with Typescript

Are there any solutions? I’m having the same issue on v6.5.9.

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!

I just replied in this thread #9610 with a similar issue happening with @storybook/react v6.3.10 what seems to happen is that typescript transpiles modules to EsNext(ESM) but the ts-node or typescript used in storybook parses it as a CommonJs file, so it gives Unexpected token 'export' error.

We’ve just released zero-config typescript support in 6.0-beta. Please upgrade and test it!

• Release 6.0.0-beta.12+
• Migration instructions
• Updated docs

Thanks for your help and support getting this stable for release!

For what it’s worth, I have the exact same issue as original poster. It’s also in a private repo, and interestingly I’m noticing this on a setup that doesn’t yet involve consuming any custom stories or any of my own code – I’ll see if I can repro in a fresh repo but it does seem suggestive that running this in a root directory with no custom stories and no custom config, yet the build step fails to parse the TS from the initialized stories.

It’s in a private repo unfortunately, but reducing to a minimum repro with the following config still has the same error:

main.js

const path = require('path');

module.exports = {
  stories: ['../src/components/**/*.stories.(ts|tsx)'],
  addons: [
    {
      name: '@storybook/preset-typescript',
      options: forkTsCheckerWebpackPluginOptions: {
        tsconfig: path.resolve(__dirname, '../tsconfig.json')
      }
    },
    '@storybook/addon-docs'
  ]
};

Button.story.tsx

import React from 'react';
import { Button, ButtonProps } from '.';

export default {
  title: 'Button',
  component: Button
};

export const Default = ({
  href = '/',
  busy = false,
  theme = 'default',
  disabled = false,
  responsive = true
}: ButtonProps) => (
  <Button {...{ href, busy, theme, disabled, responsive }}>Click me</Button>
);

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "react",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*", "types/**/*"]
}