Type error between Angular CLI and Browserslist when extending a browserslist config

[maharielrosario]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have a fresh Angular 19 application and I am trying to extend a browserslist configuration from a TS library that I changed to JS while debugging this issue. When I run the Angular build, it throws a type error.

Originally, I opened a ticket with the browserslist team so you can see browserslist/browserslist#891 for further context. I was getting errors with browserslist as they are using CommonJS requires in their code and my library and app were ESM. After removing browserslist-useragent-regexp, simplifying my library to JS, and still getting errors, they asked me to reach out to Angular as they were thinking Angular had an over complicated environment.

Minimal Reproduction

Create a shareable config following browserslist's instructions here: https://github.com/browserslist/browserslist?tab=readme-ov-file#shareable-configs

Here is my particular example with text changed as it's for a client I'm working with:

Snippet of application's package.json:

  "type": "module",
  "browserslist": [
    "extends @scope/browserslist-config-xxxx"
  ]

Here is the library's code for this config:

index.js

const BROWSERSLIST_QUERY = ['defaults'];
export default BROWSERSLIST_QUERY;

snippet of package.json

  "type": "module",
  "browserslist": [
    "extends @scope/browserslist-config-xxxx"
  ]

Exception or Error

[error] TypeError: Cannot read properties of undefined (reading 'length')
    at find (/../node_modules/browserslist/parse.js:12:25)
    at matchBlock (/../node_modules/browserslist/parse.js:46:10)
    at /../node_modules/browserslist/parse.js:73:17
    at Array.map (<anonymous>)
    at parse (/../node_modules/browserslist/parse.js:70:13)
    at parseQueries (/../node_modules/browserslist/index.js:454:16)
    at resolve (/../node_modules/browserslist/index.js:322:10)
    at Function.select (/../node_modules/browserslist/index.js:1163:14)
    at /../node_modules/browserslist/index.js:332:29
    at Array.reduce (<anonymous>)

Your Environment

Angular CLI: 19.2.8
Node: 22.14.0
Package Manager: npm 10.9.2
OS: darwin arm64

Angular: 19.2.7
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.8
@angular-devkit/build-angular   19.2.8
@angular-devkit/core            19.2.8
@angular-devkit/schematics      19.2.8
@angular/cli                    19.2.8
@schematics/angular             19.2.8
rxjs                            7.8.2
typescript                      5.7.3
zone.js                         0.15.0

Anything else relevant?

No response

[alan-agius4]

I doubt this issue is caused by the Angular CLI, as it we just call the Browserslist API without much additional handling.

Could you try running npx browserslist in the directory where your .browserslistrc file is located and see if the error still occurs?

[maharielrosario]

Hi @alan-agius4 , I don't have a .browserslistrc file in the app, i'm just using browserslist in the package.json.

But I still ran npx browserslist it and got this:

queries [ 'extends @scope/browserslist-config-xxxx' ]
queries undefined  

[alan-agius4]

I’m unable to replicate the issue. However, running npx browserslist should return the resolved results based on the provided query.

I suggest to setup a runnable reproduction. You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[maharielrosario]

@alan-agius4 My library and the consuming app are separate repositories and the library is JS only while the consuming app is using Angular so it wouldn't be an apples to apples comparison recreating the library in Angular since it's TS.

That being said, I did try to create an app to show this: https://github.com/maharielrosario/repro-app

It's currently throwing An unhandled exception occurred: Cannot find module '@test/browserslist-config-test' when you build the app.

[alan-agius4]

The error is expected in this setup because the installed library is referencing the source code directly rather than the compiled output.

Additionally, the library is built using ESM, which doesn't appear to be supported by Browserslist: https://github.com/browserslist/browserslist/blob/479f79c275c649edb59703a851c4bd2821a82653/node.js#L231

[ai]

@alan-agius4 Browserslist author is here. require() works with ESM. require(esm) was added to all current Node.js versions (22.x and 20.x).

Also, @maharielrosario was able to load ESM shared config by Browserslist CLI. We have problems only when we are using Angular CLI. This is why we expect that Angular CLI is breaking some Node.js reqiure(esm) feature.

[alan-agius4]

Hi @ai, I missed that in version 20.19, require(esm) is now enabled by default. However, this issue isn't caused by the Angular CLI, as the error can be reproduced even outside of it—specifically when using the Browserslist CLI.

Here's the output from running npx browserslist:

$ npx browserslist
/xxx/repro-app/node_modules/browserslist/cli.js:101
      throw e
      ^

TypeError: Cannot read properties of undefined (reading 'length')
    at find (/xxx/repro-app/node_modules/browserslist/parse.js:12:25)
    at matchBlock (/xxx/repro-app/node_modules/browserslist/parse.js:46:10)
    at /xxx/repro-app/node_modules/browserslist/parse.js:73:17
    at Array.map (<anonymous>)
    at parse (/xxx/repro-app/node_modules/browserslist/parse.js:70:13)
    at parseQueries (/xxx/repro-app/node_modules/browserslist/index.js:454:16)
    at resolve (/xxx/repro-app/node_modules/browserslist/index.js:322:10)
    at Function.select (/xxx/repro-app/node_modules/browserslist/index.js:1163:14)
    at /xxx/repro-app/node_modules/browserslist/index.js:332:29
    at Array.reduce (<anonymous>)

It seems the core issue is that Browserslist code doesn't handle ESM default exports correctly—when requiring an ESM, the queries variable ends up being the entire module rather than the default export.

{
  queries: [Module: null prototype] {
    __esModule: true,
    default: [ 'defaults' ]
  }
}

[ai]

Thanks for the advice! Here is a fix browserslist/browserslist@4ab61c9

[ai]

Browserslist 4.24.5 fixed ESM config support