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

[madeleineostoja]

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?

[madeleineostoja]

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

[madeleineostoja]

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]

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]

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]

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!

[iambumblehead]

@shilman the dropdown branch here reproduces the issue: iambumblehead/react-dropdown-now#103

npm ci && npm start

index.js:114 ./src/stories/Selection.stories.tsx
 31:27Module parse failed: Unexpected token 
(31:27)File was processed with these loaders:
./node_modules/@storybook/source-loader/dist/cjs/index.js
  You may need an additional loader to handle the
  result of these loaders.| };| > const Template = (args) => <Selection {...args} />;| 

[shilman]

@iambumblehead i'm not able to reproduce on that branch

[iambumblehead]

@shilman I cloned the branch now on a linux system and no error occurred. The error I encountered about 5 hours ago happened on a mac system. Possibly, this is "mac" issue? I'll delete node_modules on the mac, re-install and try again there and report back the result.

later: yes this issue occurs on a mac with a freshly cloned instance of the branch

mac	linux
node v16.0.0	node v16.2.0
npm 7.10.0	npm 7.14.0

[shilman]

@iambumblehead i'm also on a mac? 🤷‍♂️ i'm on node 15 tho?

[iambumblehead]

@shilman thank you for your response. The dropdown exhibited a similar error when used in a sandbox environment without storybook.

The problem was multiple versions of react introduced through the dropdown. The solution (which did not come from me btw) was to use peerDependencies to ensure that react from the parent-component would be used and, when including the dropdown in another environement, to remove react from the dropdown's node_modules or to remove the dropdown's node_modules altogether.

For anyone trying to resolve a similar issue, the discussion in this PR may be useful iambumblehead/react-dropdown-now#104

[upeguiborja]

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.

[cohenerickson]

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

[NourIM]

@ron23 could you find any solution? I'm having the same issue

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.