Repository: storybook
Issue: [Bug] v7.0.0-alpha.35 - When defined an env field in babel.config file, storybook build error occurs for the defined mode.
Labels: bug,question / support,configuration babel / webpack

### Describe the bug

I use storybook v7.0.0-alpha.35 and webpack5.

This is my babel.config.js that is in the root path.
I used 'babel-plugin-styled-components' plugin to convert styled component syntax to css.


```js
// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: '> 0.25%' }],
    ['@babel/preset-react', { runtime: 'automatic' }],
    '@babel/preset-typescript',
  ],
  plugins: [
    ['@babel/plugin-transform-runtime', { corejs: 3 }],
    '@babel/plugin-syntax-dynamic-import',
    'babel-plugin-styled-components',
  ],
  env: {
    production: {
      only: ['src'],
      plugins: [
        ['babel-plugin-styled-components', { displayName: false }],
        'transform-react-remove-prop-types',
        '@babel/plugin-transform-react-inline-elements',
        '@babel/plugin-transform-react-constant-elements',
      ],
    },
  },
};
```

and this is my storybook main.js file.

```js
// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async config => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, '../tsconfig.json'),
      }),
    ];
    return config;
  },
};
```

When I run storybook(npx storybook dev -p 6006), no error occurs.
But when i build storybook(npx storybook build), i get a styled component conversion error.

```
ERR!  * ./node_modules/babel-loader/lib/index.js
ERR! You may need an additional loader to handle the result of these loaders.
ERR! | import { theme } from '../src/styles/theme';
ERR! |
ERR! > const themeDecorator = storyFn => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>;
ERR! | export const decorators = [themeDecorator];
ERR! | 
ERR! Error: => Webpack failed, learn more with --debug-webpack
ERR!     at D:\React\Project\pro-solve\node_modules\@storybook\builder-webpack5\dist\cjs\index.js:297:62
ERR!     at D:\React\Project\pro-solve\node_modules\webpack\lib\HookWebpackError.js:35:5
ERR!     at Hook.eval [as callAsync] (eval at create (D:\React\Project\pro-solve\node_modules\tapable\lib\HookCodeFactory.js:28:14), <anonymous>:11:1)
```

So, I changed the value of the development property of babel's env field.

```js
// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: '> 0.25%' }],
    ['@babel/preset-react', { runtime: 'automatic' }],
    '@babel/preset-typescript',
  ],
  plugins: [
    ['@babel/plugin-transform-runtime', { corejs: 3 }],
    '@babel/plugin-syntax-dynamic-import',
    'babel-plugin-styled-components',
  ],
  env: {
    development: {
      only: ['src'],
      plugins: [
        'babel-plugin-styled-components',
      ],
    },
    production: {
      only: ['src'],
      plugins: [
        ['babel-plugin-styled-components', { displayName: false }],
        'transform-react-remove-prop-types',
        '@babel/plugin-transform-react-inline-elements',
        '@babel/plugin-transform-react-constant-elements',
      ],
    },
  },
};
```

This will cause styled-component conversion errors in both development and production.

So I thought the problem was the env field in the babel.config.js and deleted the env field.
```js
// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: '> 0.25%' }],
    ['@babel/preset-react', { runtime: 'automatic' }],
    '@babel/preset-typescript',
  ],
  plugins: [
    ['@babel/plugin-transform-runtime', { corejs: 3 }],
    '@babel/plugin-syntax-dynamic-import',
  ],
};
```

Then both development and production worked well without errors.

So I decided that there was an issue about applying the env field and posted an issue.
I'd really appreciate it if you could let me know if there's something I've missed that's causing an error.

### To Reproduce

_No response_

### System

```shell
System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Pentium(R) CPU 4415U @ 2.30GHz
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - D:\React\Project\pro-solve\node_modules\.bin\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.49)
  npmPackages:
    @storybook/addon-actions: ^6.5.16 => 6.5.16
    @storybook/addon-essentials: 7.0.0-alpha.35 => 7.0.0-alpha.35        
    @storybook/addon-interactions: 7.0.0-alpha.35 => 7.0.0-alpha.35      
    @storybook/addon-links: 7.0.0-alpha.35 => 7.0.0-alpha.35
    @storybook/jest: ^0.0.10 => 0.0.10
    @storybook/preset-typescript: ^3.0.0 => 3.0.0
    @storybook/react: 7.0.0-alpha.35 => 7.0.0-alpha.35
    @storybook/react-webpack5: 7.0.0-alpha.35 => 7.0.0-alpha.35
    @storybook/testing-library: ^0.0.13 => 0.0.13
```


### Additional context

_No response_