React - use babel presets/plugins based on CRA.

[igor-dv]

Issues:
#4298 = storybook-eol/addon-smart-knobs#33
#4741

What I did

Since CRA's babel configuration is wider than ours, we can use it for the react setup by default, no matter whether the react app is using CRA or not

#4836 (comment)

#4836 (comment)

[codecov]

Codecov Report

Merging #4836 into next will decrease coverage by 0.02%.
The diff coverage is 8.69%.

@@            Coverage Diff             @@
##             next    #4836      +/-   ##
==========================================
- Coverage   35.45%   35.42%   -0.03%     
==========================================
  Files         560      560              
  Lines        6846     6857      +11     
  Branches      919      922       +3     
==========================================
+ Hits         2427     2429       +2     
- Misses       3935     3942       +7     
- Partials      484      486       +2

Impacted Files	Coverage Δ
app/react/src/server/options.js	0% <ø> (ø)	⬆️
app/react/src/server/framework-preset-cra.js	0% <0%> (ø)
app/react/src/server/cra-config.js	27.65% <15.38%> (-0.55%)	⬇️

---

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 b287a99...c331ec8. Read the comment docs.

[igor-dv]

Tests will be fixed after #4837

[igor-dv]

TBH, I don't like this preset =( We can just add support for the SVGR and dynamic imports independently.
Also, do we want to support SVGR for not CRA apps?

[kylemh]

I think SVGR by default for any React app should be safe. If they're justing the import within an img's src attribute, I believe it still works.

[igor-dv]

I am not sure about babel-preset-create-app to be used in a non CRA setup, so I just used SVGR and dynamic-imports and moved them to the CRA preset. We can also support dynamic imports on a core basis, but it's only a proposal, so I am not sure about it.

[mrmckeb]

Have you considered using this? It might be a more robust solution than configuring Babel yourself.
https://www.npmjs.com/package/babel-preset-react-app

[shilman]

Looks great - tho I agree about the fs comment from @mrmckeb and lots of try/catch... ;-)

[shilman]

@igor-dv what's the implication of this change? is it a breaking change?

[igor-dv]

@mrmckeb I've started from using the babel-preset-create-app, but not sure about using it.
@shilman, should not be breaking change.

I am still experimenting with this, once I am sure it's not breaking anything I will remove the do not merge label

[igor-dv]

BTW, there is a side effect of the monorepo, where an official react example is also recognized as using react-scripts 🤦‍♂️

[igor-dv]

Looks like babel-preset-react-app is ok. The only thing I am confused with is babel-plugin-transform-react-remove-prop-types that should remove prop-types in prod build. I've checked and prop types still present in stories with the info addon... So idk...

[kylemh]

@igor-dv thoughts on this being a CRA2 preset specifically?

[igor-dv]

It's a CRA2 specifically, there is a check of the concrete version

[wiesson]

How can I test that feature and give feedback? I have CRA2 with dynamic imports (react-loadable) and I needed to create my own .babelrc due to the required "@babel/plugin-syntax-dynamic-import" babel addon (CRA2 handles all that for me).

[igor-dv]

It was released with https://github.com/storybooks/storybook/releases/tag/v4.1.0-alpha.8

[wiesson]

Thanks, I needed to delete node_modules and yarn.lock. Now I got the correct dependencies..

[mrmckeb]

@igor-dv @wiesson - This should have been available from this release: https://github.com/storybooks/storybook/releases/tag/v4.1.0-alpha.7 - as this is the point where using the CRA2 defaults for CRA2 apps was introduced. Or is it missing something? The new alpha handles this for React apps not based on CRA. Unless I'm missing something?

[igor-dv]

alpha 7 brought your TS support for CRA apps
alpha 8 brought SVGR and babel-cra-preset for CRA apps

[mrmckeb]

Right, @igor-dv. Based on my changes this would have brought support CRA's preset only for TypeScript CRA2.1+ apps.

Did you need help on tests for this @igor-dv? And did you manage to get the react-scripts tests to work? I know CRA doesn't always behave well in monorepos.

[igor-dv]

I have added stories for svgr and dynamic imports. They are tested in smoke tests / storyshots. In machine it was working with fallback. But in ci it seems working. I don't want to spend time there for now, so for me this is ok..