Gatsby: [v2] New Project: Error: Module build failed: BrowserslistError: Unknown browser query `dead`

[Undistraction]

Description

After creating a new project Running gatsby develop causes the error Error: Module build failed: BrowserslistError: Unknown browser query 'dead'.

Related: #6694

Steps to reproduce

• nvm use --lts
• gatsby new example-public
• cd example-public
• gatsby develop

Expected result

Site should be available on Localhost

Actual result

Error in console:

Error: Module build failed: BrowserslistError: Unknown browser query `dead` (While processing preset: "/Users/me/Sites/example-public/node_modules/babel-preset-env/lib/index.js")

  - index.js:164
    [example-public]/[browserslist]/index.js:164:11

  - Array.reduce

  - index.js:132 resolve
    [example-public]/[browserslist]/index.js:132:18

  - index.js:224 browserslist
    [example-public]/[browserslist]/index.js:224:16

  - targets-parser.js:103 getTargets
    [example-public]/[babel-preset-env]/lib/targets-parser.js:103:63

  - index.js:144 buildPreset
    [example-public]/[babel-preset-env]/lib/index.js:144:45

  - option-manager.js:317
    [example-public]/[babel-core]/lib/transformation/file/options/option-manager.js:317:46

  - Array.map

  - option-manager.js:275 OptionManager.resolvePresets
    [example-public]/[babel-core]/lib/transformation/file/options/option-manager.js:275:20

  - option-manager.js:264 OptionManager.mergePresets
    [example-public]/[babel-core]/lib/transformation/file/options/option-manager.js:264:10

  - option-manager.js:249 OptionManager.mergeOptions
    [example-public]/[babel-core]/lib/transformation/file/options/option-manager.js:249:14

  - option-manager.js:368 OptionManager.init
    [example-public]/[babel-core]/lib/transformation/file/options/option-manager.js:368:12

  - index.js:212 File.initOptions
    [example-public]/[babel-core]/lib/transformation/file/index.js:212:65

  - index.js:135 new File
    [example-public]/[babel-core]/lib/transformation/file/index.js:135:24

  - pipeline.js:46 Pipeline.transform
    [example-public]/[babel-core]/lib/transformation/pipeline.js:46:16

  - index.js:46 transpile
    [example-public]/[babel-loader]/lib/index.js:46:20

  - fs-cache.js:79
    [example-public]/[babel-loader]/lib/fs-cache.js:79:18

  - fs-cache.js:15 ReadFileContext.callback
    [example-public]/[babel-loader]/lib/fs-cache.js:15:14

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i5-5575R CPU @ 2.80GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
  Browsers:
    Chrome: 68.0.3440.84
    Safari: 11.1.2
  npmPackages:
    gatsby: ^1.9.277 => 1.9.277
    gatsby-link: ^1.6.46 => 1.6.46
    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11
  npmGlobalPackages:
    gatsby-cli: 2.0.0-beta.12

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[Chuloo]

Tried to reproduce it but couldn't. Everything works fine on my machine with node v10.7.0, same Gatsby version.
This issue is similar to #6694 which wasn't solved. Can someone try to reproduce this error as well?

[vhf]

I could reproduce:

$ node -v
v10.8.0

$ npm -v
6.3.0

$ yarn -v
1.9.4

$ npm install --global [email protected]
$ gatsby new foo
$ cd foo
$ gatsby develop
success delete html and css files from previous builds — 0.024 s
success open and validate gatsby-config — 0.062 s
success copy gatsby files — 0.054 s
success onPreBootstrap — 0.011 s
success source and transform nodes — 0.056 s
success building schema — 0.177 s
success createLayouts — 0.040 s
success createPages — 0.002 s
success createPagesStatefully — 0.125 s
success onPreExtractQueries — 0.000 s
success update schema — 0.128 s
success extract queries from components — 0.105 s
success run graphql queries — 0.058 s
success write out page data — 0.023 s
success write out redirect data — 0.004 s
success onPostBootstrap — 0.004 s

info bootstrap finished - 3.51 s

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                           9:45:53 AM

 error  in ./src/layouts/index.css

Module build failed: BrowserslistError: Unknown browser query `dead`

To make sure there was no interferences I wiped my global modules (rm -rf /usr/local/lib/node_modules) and reinstalled node with npm. I could still reproduce with the above steps.

Note that gatsby new sends quite a few warnings, some of them seem clearly related:

❯ gatsby new foo
info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git
Cloning into 'foo'...
remote: Counting objects: 812, done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 812 (delta 0), reused 3 (delta 0), pack-reused 808
Receiving objects: 100% (812/812), 702.59 KiB | 509.00 KiB/s, done.
Resolving deltas: 100% (472/472), done.
success Created starter directory layout
info Installing packages...
yarn install v1.9.4
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍  Resolving packages...
warning gatsby > [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
warning gatsby > [email protected]: 'postcss-cssnext' has been deprecated in favor of 'postcss-preset-env'. Read more at https://moox.io/blog/deprecating-cssnext/
warning gatsby > postcss-cssnext > autoprefixer > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning gatsby > postcss-cssnext > caniuse-api > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning gatsby > postcss-cssnext > pixrem > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning gatsby > css-loader > cssnano > postcss-merge-rules > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
[2/4] 🚚  Fetching packages...
[----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------] 0/1266(node:59402) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[3/4] 🔗  Linking dependencies...
warning "gatsby > [email protected]" has incorrect peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning "gatsby > [email protected]" has unmet peer dependency "caniuse-db@^1.0.30000652".
warning " > [email protected]" has unmet peer dependency "react@>=15.0.0".
warning "react-helmet > [email protected]" has unmet peer dependency "react@^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 45.93s.

This is where I think the issue comes from:

warning gatsby > postcss-cssnext > autoprefixer > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning gatsby > postcss-cssnext > caniuse-api > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning gatsby > postcss-cssnext > pixrem > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning gatsby > css-loader > cssnano > postcss-merge-rules > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

I guess it means that this uses a template project meant for v1, and only breaks on v2.

For instance this works:

$ gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog.git#v2
$ cd gatsby-blog
$ gatsby develop

[KyleAMathews]

Thanks for the investigations @vhf!

And yeah, from this thread it looks like the blame is on an old version of cssnano — https://github.com/browserslist/browserslist/issues/266

That issue has some ideas for working around this issue.

I assume this won't be a problem with v2.

[KyleAMathews]

As v2 has newer versions of packages.

[Undistraction]

Sorry if I'm being dense, but isn't the problem just that Gatsby v2 is currently using the wrong version of the the default starter - one that is meant for v1, meaning shouldn't the reference to v1 of the default starter be updated to the new version?

[KyleAMathews]

v2 isn't released yet :-)

[robstarbuck]

I fixed this by specifying a v2 starter (as per the docs) when using _new_ (vhf mentioned as much):

gatsby new my-default-project https://github.com/gatsbyjs/gatsby-starter-default#v2

Using just gatsby new [PROJECT_NAME] resulted in the posted error.

[BobLamarley]

I'm having the same issue when launching a 'gatsby build'
I'm using gastby-starter-strava, how can i pass through the problem ?

[pungggi]

I am having this since today with a v1 project but on deploying with travis not on my local machine

https://travis-ci.org/graphicmachines/website/builds/430290881

using [email protected]

[ztrayner]

Looks like this issue is breaking build systems that are still on Gatsby v1

[DSchau]

@pungggi it's most likely an issue with how you're building your site in Travis. Maybe older version of npm that doesn't respect lock files?

I can confirm that checking out that project, running npm install, and then npm run build does not manifest the issue, so can't reproduce!

@ztrayner I think we'd need a lot more evidence before we say that!

I'm going to close this as "needs reproduction" but please re-open if anyone can!

[pungggi]

My build now passed, switched from yarn to npm, and downgraded node from 8.12 to 8.9.4 with npm 5.6.0

[DSchau]

@pungggi thanks so much for posting your solution!

[dekc]

Using node_modules/.bin/gatsby build ... works.
Using gatsby build (coming from a globally installed gatsby-cli) ... fails with said error.

So for me, I have now removed installing gatsby-cli entirely and production builds now successfully build.

[pungggi]

it happend the same to me, when i updated locally my global gatsby-cli to v. 2.4.1.

[ajgoldenwings]

node_modules/.bin/gatsby build seemed to build once but not able to run this subsequent times.

[5tormTrooper]

Globally I have gatsby 2.4.1 installed. For my project, ^1.9.63.
$ node_modules/.bin/gatsby develop works indefinitely for me, but it's obviously not a long term solution. It'd be helpful to be able to run whatever version of gatsby is in package.json instead of the global one, as I have not migrated my project to v2, but would still like to start new projects with v2 from the global gatsby.

[jonathan-chin]

same deal as @5tormTrooper my local gatsby was 1.X and my global was 2.X
downgrading to 1.X globally fixed the issue for me

[5tormTrooper]

Looks like it's been fixed in 2.4.2. I'm able to just run $ gatsby build again after updating gatsby-cli.
See https://github.com/parmsang/gatsby-starter-ecommerce/issues/10%23issuecomment-425077715