Skip to content

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

Open
@tehandyb

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions