Caching of babel.config.js doesn't seem to be working properly when using api.caller for different webpack targets

[tehandyb]

I'm submitting a bug report

Webpack Version:
4.29.6

Babel Core Version:
7.10.4

Babel Loader Version:
8.0.0

Please tell us about your environment:
Windows 10, WSL, Ubuntu

Current behavior:
Using one babel.config.js file, trying to change this config based on two targets, web and node, using api.caller. I want tree shaking just for web, and not for node environment. When I have my webpack config with target set to 'web' it works correctly, with treeshaking. But if I add another webpack config to my array of webpack exports and that config has the target set to 'node', then my treeshaking no longer works for the web bundle. I believe babel caches the config function, when using api.caller, but I would think that when the target changes it will invalidate the cache. This seems to be the recommended style of config syntax, am I missing something?

My babel.config.js looks like this:

const basePlugins = [
  'babel-plugin-styled-components',
  '@babel/transform-async-to-generator',
  '@babel/plugin-syntax-dynamic-import',
  'react-loadable/babel',
  'babel-plugin-root-import',
  '@babel/plugin-proposal-class-properties',
];

module.exports = (api) => {
  // Flag when the target is for the web so we will do treeshaking
  // Otherwise, assume it is a node environment(eg. tests or node running server side)
  const isWebackTargetWeb = api.caller(caller => caller && caller.target === 'web');

  const configObj = {
    sourceType: (isWebackTargetWeb ? 'unambiguous' : 'module'),
    presets: [
      '@babel/preset-react',
      '@babel/typescript',
      ['@babel/preset-env', {
        targets: '> 0.3%, not IE 11, not op_mini all',
        useBuiltIns: 'usage',
        corejs: { version: '3.8', proposals: false },
        ...(isWebackTargetWeb && { modules: false }),
      }],
    ],
    env: {
      development: {
        sourceMaps: true,
        plugins: ['source-map-support'],
      },
    },
    plugins: basePlugins,
    ignore: ['node_modules/is_js'],
  };

  if (!isWebackTargetWeb) {
    configObj.plugins.push('@babel/plugin-transform-modules-commonjs');
  }

  return configObj;
};

Expected/desired behavior:
When having two webpack configs exported from my webpack config file, one having target set to 'web', and one target set to 'node', tree shaking should still work correctly.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.
  Steps:
  Use the babel config I provided above. And then export two webpack configs from one webpack.config.js file. Run in production mode with NODE_ENV=production. Use webpack-bundle-analyzer plugin to see the output is not correct

• What is the motivation / use case for changing the behavior?
  Need to be able to change babel.config.js based on webpack target