Skip to content

[Bug]: preset-env disables caching when specifying browserslist env (v7.25.7+) #16915

@asapach

Description

@asapach

💻

  • Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

When enabling caching in babel-loader and babel.config.js, it's being completely invalidated if browserslistEnv option is provided in preset-env:

{
    loader: 'babel-loader',
    options: {
        cacheDirectory: 'cache'
    }
}
module.exports = function(api) {
    api.cache(true);
    return {
        presets: [
            ['@babel/preset-env', { browserslistEnv: 'production' }]
        ]
    };
};

Here is the repo with a working example: https://github.com/asapach/babel-cache

Configuration file name

babel.config.js

Configuration

{
  "assumptions": {},
  "filename": "...\\src\\index.js",
  "sourceMaps": false,
  "sourceFileName": "...\\src\\index.js",
  "caller": {
    "name": "babel-loader",
    "target": "web",
    "supportsStaticESM": true,
    "supportsDynamicImport": true,
    "supportsTopLevelAwait": true
  },
  "targets": {
    "android": "129.0.0",
    "chrome": "109.0.0",
    "edge": "126.0.0",
    "firefox": "115.0.0",
    "ios": "15.6.0",
    "opera_mobile": "80.0.0",
    "safari": "15.6.0",
    "samsung": "25.0.0"
  },
  "cloneInputAst": true,
  "babelrc": false,
  "configFile": false,
  "browserslistConfigFile": false,
  "passPerPreset": false,
  "envName": "development",
  "cwd": "...\\babel-cache",
  "root": "...\\babel-cache",
  "rootMode": "root",
  "plugins": [],
  "presets": [
    [
      "@babel/preset-env",
      {
        "browserslistEnv": "production",
        "debug": true
      }
    ]
  ]
}

Current and expected behavior

After updating @babel/preset-env to v7.25.7, cache is not being written to disk.
Repro steps:

  1. Clone the repo: https://github.com/asapach/babel-cache
  2. Run npm run build
  3. Check that cache folder is empty

Before v7.25.7 or when browserslistEnv option is removed, the cache folder is being populated

Environment

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 22.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @babel/core: ^7.25.8 => 7.25.8
    @babel/preset-env: ^7.25.8 => 7.25.8
    babel-loader: ^9.2.1 => 9.2.1
    webpack: ^5.95.0 => 5.95.0

Possible solution

Revert #16858 by @JLHwung

Additional context

Effectively any option in this condition will trigger this issue:

if (
// @babel/core < 7.13.0 doesn't load targets (api.targets() always
// returns {} thanks to @babel/helper-plugin-utils), so we always want
// to fallback to the old targets behavior in this case.
semver.lt(api.version, "7.13.0") ||
// If any browserslist-related option is specified, fallback to the old
// behavior of not using the targets specified in the top-level options.
opts.targets ||
opts.configPath ||
opts.browserslistEnv ||
opts.ignoreBrowserslistConfig
) {

Metadata

Metadata

Assignees

No one assigned

    Labels

    i: needs triageoutdatedA closed issue/PR that is archived due to age. Recommended to make a new issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions