search

strothj / react-app-rewire-typescript-babel-preset

Add TypeScript support to Create React App using @babel/preset-typescript
https://react-app-rewire-typescript-babel-preset.netlify.com
MIT License
52 stars 6 forks source link

Working with Storybook #10

Closed seniorquico closed 6 years ago

seniorquico commented 6 years ago

Has anyone successfully gotten Storybook to work with this rewire? I moved over an existing test project, and everything seems to work great except Storybook.

When I have a "stories.js" file (just because it was the original file in my test project), Storybook throws the following error when import a TypeScript file (in this instance, "TestList" is a TypeScript file):

ERROR in ./stories.js
Module not found: Error: Can't resolve './TestList'

When I have a "stories.tsx" file (just renaming the existing file), Storybook throws the following warning that still prevents anything from loading or working correctly:

WARNING in ./stories.tsx
Module parse failed: Unexpected token (17:6)
You may need an appropriate loader to handle this file type.

Thanks for your effort on this project, strothj. We're really excited about the opportunities it presents for our development workflows.

strothj commented 6 years ago

I use it with Storybook, I'll see about getting a sample config up for you.

strothj commented 6 years ago

If I'm not mistaken, currently: Create React App v2 uses Webpack 3 + Babel 7 (they've merged in Webpack 4 but have not cut a release yet) Storybook uses Webpack 4 + Babel 6

What I did was remove the Babel 6 loader and replace it with Babel 7. I copied over Storybook's Babel config and converted it to Babel 7.

This is the setup I use: https://github.com/strothj/react-app-rewire-typescript-babel-preset/tree/master/packages/example-with-storybook

Once Storybook converts to Babel 7 I think this will be less painful. Also, there may be a better way to go about this, if anyone has suggestions I'd be happy to hear them too.

seniorquico commented 6 years ago

Thanks, @strothj! I'm going to dive into the sample configs now.

I haven't drilled into CRA internals before (kinda the reason why we choose to build a project on top of CRA!). I'm just curious... Did you create these sample configs manually? Are they some massaged version of Storybook's Webpack config, CRA's Webpack config, or ...?

seniorquico commented 6 years ago

Ah... going through it, I see the detail of your comment blocks... you are awesome, sir! You already answered my question! :-)

This looks like a great workaround while we're waiting for all of these packages to migrate/stabilize. Thanks for the prompt assistance!

strothj commented 6 years ago

No problem :)