Add TypeScript support for react-scripts

[mrmckeb]

Issue: #4587

What I did

Added support for TypeScript when using react-scripts@>=2.1.0.

How to test

Create a new Create React App project and pass in the --typescript flag.

npx create-react-app my-app --typescript

Install storybook (this build) and run storybook. You should not see any errors.

[codecov]

Codecov Report

Merging #4824 into next will increase coverage by 0.04%.
The diff coverage is 33.33%.

@@            Coverage Diff            @@
##            next    #4824      +/-   ##
=========================================
+ Coverage   35.5%   35.55%   +0.04%     
=========================================
  Files        560      560              
  Lines       6818     6827       +9     
  Branches     913      915       +2     
=========================================
+ Hits        2421     2427       +6     
- Misses      3919     3920       +1     
- Partials     478      480       +2

Impacted Files	Coverage Δ
app/react/src/server/options.js	0% <ø> (ø)	⬆️
app/react/src/server/framework-preset-cra-rules.js	0% <ø> (ø)
app/react/src/server/cra-config.js	28.2% <33.33%> (+11.53%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e5c925f...77dd97e. Read the comment docs.

[igor-dv]

Very cool! Thanks for taking it.
Do you want to add CLI tests for this in a separate PR?

[mrmckeb]

@igor-dv Definitely, I can take a look at that over the weekend.

I've squashed and pushed those changes, thanks for the review.

[mrmckeb]

Just a note that I didn't work on tests for this as @igor-dv put together and merged in a clever PR (#4836) to make the CRA-style config default for all React-based apps, which affected these files.

[Vinnl]

Thanks for this work! Do I understand it correctly that now, using Storybook 4.1, we can:

• Use Storybook for React components written in TypeScript (this PR).
• Write Storybook configuration in TypeScript (Add CRA TypeScript support for .storybook folder #4902).
• NOT write stories themselves in TypeScript.

And follow-up in case the latter is false: is there anything that needs to be done to enable writing stories in TypeScript, other than renaming them from .jsx to .tsx?

[igor-dv]

If you are using CRA2 you can use TS for all also in storybook

[mrmckeb]

Yes, all of my team's stories are .tsx and it works great.

[Vinnl]

@mrmckeb Hmm, and you've removed your custom webpack.config.js and don't have a TypeScript loader in your own dependencies?

I'm asking because I'm running into

Module parse failed: Unexpected token (17:22) You may need an appropriate loader to handle this file type.

So it appears that for some reason, without my own Webpack config, Storybook's config does not look for TypeScript files.

[mrmckeb]

Hi @Vinnl, can you let me know what version of react-scripts and @storybook/react you're using? Thanks!

[Vinnl]

Of course @mrmckeb :) react-scripts is at 2.1.1, @storybook/react is at 4.1.1. According to yarn outdated, both are at their latest version.

[mrmckeb]

Hmm, where are you stories located? In component directories?

Perhaps you could push up a quick test repo that I could play with? Something very rough.

[Vinnl]

@mrmckeb The stories are in /stories, next to the components which are in /src. The project is open source, so it can be seen here. (Note that this work is done in the branch 57-use-svg-component-and-native-typescript-in-storybook, and that there are several projects in this repo - the relevant one is in /client.)

Update: With the following webpack.config.js it does work, although I think it's supposed to work without it?

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]],
    },
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
}

Second update: vstelmakh on Slack confirmed that it's not working without configuration for them either.

Final update: Moving the stories to be located within src/ (which also is a requirement for regular components with Create React App) made it work!

[mrmckeb]

Sorry @Vinnl, I see what's wrong now.

Our config (at create-react-app) supports files inside of src, and you have your stories outside of src.

You can either add your stories folder to src, or use another approach. Personally, I keep stories alongside each component (Component.stories.tsx).

The custom webpack config you have provided is not necessary, if you really want to keep a stories folder outside of src, you can simply add that to the include array:
https://github.com/storybooks/storybook/pull/4902/files#diff-eda2a92e48b4df8907d95774b054a271R75

I hope that helps!

[Vinnl]

Thanks for working on this at all @mrmckeb - you don't owe me anything, so that's very generous :)

But you were entirely correct! Moving the stories into the src/ folder solved the issue, and the stories get compiled just like my regular components now. Thanks a bunch!

[igor-dv]

@mrmckeb we probably need to add stories dir into the include as well 🤦‍♂️ SB cli creates this dir when you execute sb init...

[mrmckeb]

I actually feel that this is not a good default. I much prefer stories to be alongside components - perhaps that should be the default? This results in less jumping between folders, and a smaller chance that people will forget to update stories after changing components (which I've seen a lot).

Regardless, this is a very easy fix if we want to add it ;)

[igor-dv]

Yeah, that is how most of the people work with stories, IMO. Though I am not sure it's easy to do this with the cli at least now...