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

[seaneking]

Describe the bug
Using the Storybook v6 beta with @storybook/preset-typescript fails, throwing an error for loading JSX in stories.

Minimal repro has this error:

File was processed with these loaders:
 * ./node_modules/@storybook/source-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| };
| 
> export const Basic = () => <Button>Click me</Button>;
| 
    at Object../src/components/Button/Button.stories.tsx 

To Reproduce
Steps to reproduce the behavior:

1. Install @storybook/react@next and @storybook/preset-typescript@next
2. Write a story and import your typescript compoent
3. Watch it fail

Expected behavior
Should be able to load Typescript components/stories and load JSX

Screenshots

System:

System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 11.12.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.14.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 81.0.4044.129
    Firefox: 74.0
    Safari: 13.1
  npmPackages:
    @storybook/addon-docs: next => 6.0.0-beta.2 
    @storybook/addon-essentials: next => 6.0.0-beta.2 
    @storybook/addons: next => 6.0.0-beta.2 
    @storybook/preset-typescript: ^3.0.0 => 3.0.0 
    @storybook/react: next => 6.0.0-beta.2 

Additional context
N/A

[shilman]

@seaneking do you have a repro we can look at?
@mrmckeb any thoughts?

[seaneking]

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/**/*"]
}

[shilman]

@seaneking thanks for the additional info. is there any chance you can create a minimal repo with those files (and package.json and whatever else is needed to get it to run and fail)? would really help out, since we have literally hundreds of open issues, and i'd love to get to the bottom of this and get it fixed.

[mrmckeb]

I agree with @shilman - having a reproduction will be immensely helpful here. We have a demo of this working in the presets repo, you could also cross-reference that?
https://github.com/storybookjs/presets/tree/master/examples/ts-react

[seaneking]

Sure thing I'll see what I can do, pretty slammed with a deadline atm but I'll try and put something together over the weekend.

It's also running in a Gatsby site if that's of any relevance.

[shilman]

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!

[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!

[ron23]

I have same issue. Using clean rc 6.0.2.
When I say clean I mean I ran the cli to regenerate the configs

WARNING in ./src/components/Table/Table.stories.tsx 24:0
Module parse failed: The keyword 'interface' is reserved (24:0)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   }));
| 
> interface ColumnSortTypes {
|   col0?: SortOrderType;
|   col1?: SortOrderType;
 @ \.).*?\.stories\..*?\/?)$ (./src sync (?:(?!\.).*?\.stories\..*?\/?)$) ./components/Table/Table.stories.tsx
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

[shilman]

@ron23 do you have a repro repo i can look at?

[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!

[michaelaflores]

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.

[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!