[Bug]: storeStoreV7 will not work when @babel/preset-env is loaded in babel.config.js, only in .babelrc.json

[vivshaw]

Describe the bug

We have a bizarre Storybook & Babel bug that we have been unable to create a minimal repro of. Since other folks' bug reports on related issues have been helpful, we figured we'd toss ours out into the void here too, Just In Case ™️

We recently upgraded to Storybook v7, but we had to keep storyStoreV7 turned off in order to run the Storybook successfully. When we set it to true, all our Stories give us the good ol' Cannot find module: Foo.stories.tsx. This led us to #18537, which suggests that this error is due to a missing Babel config file. Our config file was not missing- we have a babel.config.js. However, we tried running the steps suggested in the migration docs, which created a second Babel config file at .babelrc.json- and we were baffled to find that that fixed it!

We did some further digging, and learned some more:

1. We can trim that .babelrc.json down all the way to contain only this content: { "presets": ["@babel/preset-env"] }. That is enough to make storyStoreV7 start working!
2. But we already have @babel/preset-env in our babel.config.js!
3. storyStoryV7 also starts working if we ditch our babel.config.js, and move all the configuration into the generated .babelrc.json.
4. But moving it into .babelrc.js doesn't fix it. It appears to need to be a JSON Babel config file specifically.
5. storyStoreV7 also also starts working if we drop the .babelrc.json and instead provide @babel/preset-env as a loader option to babel-loader in Storybook's main.ts.
6. We found some tickets suggesting files other that .babelrc might not be picked up (Root babel.config.js not loaded #6633, Support other configuration files than .babelrc for babelModeV7 #18667). But those are all closed successfully. Furthermore, when we debug the Babel config being loaded via BABEL_SHOW_CONFIG_FOR=.storybook/preview.ts yarn storybook, we can see that our babel.config.js is getting picked up. (And we were 99% sure of that anyway- we use all sorts of other Babel stuff in there that our Storybook would never have built without in the first place!)

We're pretty much stumped at this point. As best we can tell, something is causing Storybook not to respect one specific preset, @babel/preset-env, in one specific Babel config file type, .js configs. But we can't find anything suspicious in the Babel or Webpack debug that would explain why that happens.

As I mentioned before, we have been completely unable to create a minimal repro, so I imagine there's not much y'all can do. (In fact, when we tried to make one, we found that contrary to the docs Storybook worked fine with no Babel config at all, leaving us extra baffled!) We mostly wanted to put this out there so there's a trail of breadcrumbs in case others trip over this issue like we did.

To Reproduce

No response

System

Environment Info:

  System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
  Binaries:
    Node: 16.15.0 - /run/user/1000/fnm_multishells/302688_1690412525430/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.5.5 - /run/user/1000/fnm_multishells/302688_1690412525430/bin/npm
  Browsers:
    Chrome: 115.0.5790.110
    Firefox: 115.0.2
  npmPackages:
    @storybook/addon-essentials: ^7.1.1 => 7.1.1 
    @storybook/addons: ^7.1.1 => 7.1.1 
    @storybook/react: ^7.1.1 => 7.1.1 
    @storybook/react-webpack5: ^7.1.1 => 7.1.1 
    @storybook/testing-library: ^0.2.0 => 0.2.0 
    @storybook/theming: ^7.1.1 => 7.1.1

Additional context

No response