Babel configuration problems in 6.4.0-rc.8 with and without babelModeV7

[sunyatasattva]

Describe the bug

Related issues: #12745, #14425, #12292
Related PR: #15928

When updating to @storybook/[email protected], the whole Babel configuration doesn't behave as expected.

On @storybook/[email protected], if I have no babelrc file, Storybook is able to infer controls from React.PropTypes correctly. If I add my custom babelrc, then it breaks (as explained in this comment).

When I update to @storybook/[email protected] and not enabling the babelModeV7, I expect Storybook to behave exactly like it would on 6.3.x. However, even without a custom babelrc, my propTypes are not parsed correctly.

If I enable babelModeV7 and run npx sb@next babelrc to generate the default babelrc from previous versions, the file gets correctly generated. I install the missing dependencies and then I expect it to behave the same way as 6.3.x. However, my propTypes still do not work.

To Reproduce

I provided a minimal reproduction case. I scaffolded a barebones app with CRA, then used npx sb init to initialize Storybook. From then, I removed all the examples except for the Button component. I have converted that example from TypeScript back to jsx. You can take the following steps to confirm my problem:

Working case

1. Install @storybook/react@latest
2. Remove .babelrc.json and disable babelModeV7
3. Run npm run storybook
4. Confirm that the types are correctly inferred by the controls

Broken case 1

1. Add a small .babelrc.json
2. Run npm run storybook
3. Notice the types are not inferred by the controls any longer

Broken case 2

1. Upgrade to @storybook/react@next (6.4.0-rc.8 at the time of writing)
2. Remove the .babelrc.json file (now we are in the same state as working case above)
3. Run npm run storybook
4. Notice the types are still not inferred by the controls, despite this working in @latest

Broken case 3

1. Run npx sb@next babelrc to generate the babel configuration file, or use the one provided in the repo
2. Make sure all the babel dependencies are installed (they should already be in the provided package.json)
3. Enable babelModeV7
4. Run npm run storybook
5. Notice the types are still not inferred by the controls

storybook-babel-mrc.zip

System

System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 12.21.0 - ~/.nvm/versions/node/v12.21.0/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.21.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Firefox: 85.0.2
    Safari: 15.0
  npmPackages:
    @storybook/addon-actions: ^6.3.12 => 6.3.12 
    @storybook/addon-essentials: ^6.3.12 => 6.3.12 
    @storybook/addon-links: ^6.3.12 => 6.3.12 
    @storybook/node-logger: ^6.3.12 => 6.3.12 
    @storybook/preset-create-react-app: ^3.2.0 => 3.2.0 
    @storybook/react: ^6.3.12 => 6.3.12 

[ndelangen]

I've investigated this, and it seems that though everything -at least- works, there's an issue located in the CRA preset.

I can confirm cases 2 & 3: in fact I have established that the presence of babelrc.json does absolutely nothing for CRA even if babelModeV7: true,.

[ndelangen]

[ndelangen]

according to @shilman babel-plugin-react-docgen should be adding a __docgen property unto the component classes which is used by addon-docs to create controls.

[ndelangen]

I can see STORYBOOK_REACT_CLASSES remaining to be an empty object at runtime too..

[ndelangen]

After a bunch of debugging, it seems like there were just version mismatches. I was able to make your example work:
storybook-mrc.zip

[ndelangen]

Just so you know:

babelModeV7: true,

should do absolutely nothing for the preview application in a CRA setup, the CRA preset already overloads the entire webpack & babel config.

[sunyatasattva]

Thanks for spending the time debugging @ndelangen. So the presets will take priority over user defined Babel configuration? Also, the migration docs mention that the .babelrc with the Storybook directory is not supported anymore, so how could one make some Storybook specific configurations (e.g. for the docgen not to be in my main Babel config)

[ndelangen]

It's up to the presets to take the previous config and change it however they see fit, and return new config.

We CRA preset, essentially throws away provided config, and replaces it with some config internal from CRA.

[sunyatasattva]

Thanks for the response. But, as I mentioned, considering that the .babelrc with the Storybook directory is not supported anymore, how could one create a Storybook specific Babel config if presets can override the entire thing?