browserslist error(module not found) when run next build

[ale-grosselle]

Run next info (available from version 12.0.8 and up)

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.1.0: Wed Oct 13 17:33:23 PDT 2021; root:xnu-8019.41.5~1/RELEASE_X86_64
Binaries:
  Node: 16.13.0
  npm: 8.1.0
  Yarn: 1.22.10
  pnpm: N/A
Relevant packages:
  next: 12.0.9-canary.0
  react: 17.0.2
  react-dom: 17.0.2

What version of Next.js are you using?

12.0.8

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome, Safari

What operating system are you using?

macOS

How are you deploying your application?

Other platform

Describe the Bug

12.0.7 does't have this bug, Only 12.0.8 (and canary)

Running "next build" command I received this error:

> Build error occurred
Error: Cannot find module 'browserslist-config-company'
    at Function.webpackEmptyContext [as resolve] 

The package is properly installed:

The package.json browserlist:

"browserslist": [
    "extends browserslist-config-company"
  ],

Definition of browserslist-config-company/index.js

module.exports = ['cover 90% in IT', 'last 2 years', 'not dead', 'not IE 11'];

Including browserlist rules from an external file ("extends browserslist-config-company"), probably is the root cause of the problem. Hard coding the rules:

"browserslist": [
    "cover 90% in IT", "last 2 years", "not dead", "not IE 11"
  ],

all works as expected

Expected Behavior

Including browserlist rules from an external package, it won't break the build.

To Reproduce

Simply, try to define in your package.json the browserslist attribute, including rules from an external package

[balazsorban44]

Hi, I could not reproduce this. I installed browserslist-config-google and referenced it as such:

// package.json
"browserslist": ["extends browserslist-config-google"]

And the build did not break.

Could you create a minimal reproduction?

[ale-grosselle]

Hello @balazsorban44,

1. download this repo: https://github.com/ale-grosselle/next-browserconfifg
2. run next build

I will get this error:

[james-maher]

I am also seeing this same issue on our repo. Difference being that the module it cannot find it scoped i.e. @myscope/browserslist-config. Using next 12.0.8 but going to have to hardcode our config across our mono repo for now since this is preventing us from extending that module.

[DennisNeuendorfJimdo]

It seems this regression happened between 12.0.7 and 12.0.8. We have two Nextjs-projects with a working browserslist-extends on 12.0.7 like:

extends @myscope/browserslist-config-foo

Both break when upgrading to 12.0.8.

with errors like :

error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Cannot find module '@myscope/browserslist-config-foo'
    at Array.reduce (<anonymous>)

[DennisNeuendorfJimdo]

The reproduction-repo form @ale-grosselle shows the error (when you delete the package-lock.json). Pinning nextjs to 12.0.7. fixes the problem.

[topaxi]

Running into the same issue, also a scoped browserslist config, any workarounds besides downgrading?

[DennisNeuendorfJimdo]

The bug seems to be introduced in this commit by switching to a precompiled version of browserslist.

I replaced the compiled import require("next/dist/compiled/browserslist") to the former require("browserslist") which solved the issue.

[topaxi]

Very nice, thanks for the quick fix 🎉 🙇

[DennisNeuendorfJimdo]

Awesome! Thanks for the fast work!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.