react-scripts >=2 you must specify targeted browsers - it's already in the package.json

[Drew Gallagher]

When I run the yarn build script in my pipeline for our react app, it runs 

node --max-old-space-size=8192 scripts/build.js

Then I get the following error 

Failed to compile.

As of react-scripts >=2 you must specify targeted browsers.

Please add a browserslist key to your package.json.

However, the browserlist is already in the package.json

{

"name": "nova-web",

"version": "21.0.0",

"license": "UNLICENSED",

"private": true,

"dependencies": {

"@babel/core": "7.8.4",

"@babel/plugin-transform-typescript": "^7.12.1",

"@emotion/react": "^11.10.5",

"@emotion/styled": "^11.10.5",

"@loadable/component": "^5.12.0",

"@mui/icons-material": "^5.11.0",

"@mui/material": "^5.11.0",

"@mui/styled-engine-sc": "^5.11.0",

"@mui/x-data-grid": "^5.17.19",

"@reduxjs/toolkit": "^1.8.2",

"@sentry/react": "^5.19.2",

"@svgr/webpack": "4.3.3",

"@testing-library/jest-dom": "5.14.1",

"@testing-library/react": "12.1.0",

"@testing-library/user-event": "13.2.1",

"@types/classnames": "^2.2.10",

"@types/crypto-js": "^3.1.44",

"@types/jest": "^27.0.2",

"@types/js-cookie": "^2.2.6",

"@types/loadable__component": "^5.10.0",

"@types/lodash": "^4.14.149",

"@types/node": "^12.0.0",

"@types/pluralize": "^0.0.29",

"@types/react": "^16.9.0",

"@types/react-dom": "^16.9.0",

"@types/react-helmet": "^6.1.0",

"@types/react-html-parser": "^2.0.1",

"@types/react-redux": "^7.1.7",

"@types/react-router": "^5.1.4",

"@types/react-router-dom": "^5.1.3",

"@types/react-sticky": "^6.0.3",

"@types/react-timeago": "^4.1.1",

"@types/recharts": "^1.8.14",

"@types/smoothscroll-polyfill": "^0.3.1",

"@types/styled-components": "^5.1.26",

"accesscontrol": "^2.2.1",

"antd": "^4.7.2",

"array-move": "^3.0.1",

"axios": "^0.19.2",

"babel-eslint": "10.0.3",

"babel-jest": "27.2.1",

"babel-loader": "8.0.6",

"babel-plugin-import": "^1.13.0",

"babel-plugin-named-asset-import": "^0.3.6",

"babel-preset-react-app": "^9.1.1",

"camelcase": "^5.3.1",

"case-sensitive-paths-webpack-plugin": "2.3.0",

"chai": "^4.3.4",

"change-case": "^4.1.1",

"classnames": "^2.2.6",

"crypto-js": "^4.0.0",

"css-loader": "^3.4.2",

"cypress": "^9.0.0",

"date-fns": "^2.13.0",

"dnd-core": "^10.0.2",

"dotenv": "8.2.0",

"dotenv-expand": "5.1.0",

"eslint-config-react-app": "^5.2.0",

"eslint-loader": "3.0.3",

"eslint-plugin-flowtype": "4.6.0",

"eslint-plugin-import": "^2.22.1",

"eslint-plugin-jsx-a11y": "6.2.3",

"eslint-plugin-react-hooks": "^1.6.1",

"file-loader": "4.3.0",

"fs-extra": "^8.1.0",

"graphql-request": "^1.8.2",

"html-webpack-plugin": "4.0.0-beta.11",

"identity-obj-proxy": "^3.0.0",

"immutability-helper": "^3.0.2",

"immutable": "^4.0.0-rc.12",

"jest": "27.2.1",

"jest-watch-typeahead": "0.4.2",

"js-cookie": "^2.2.1",

"json-to-graphql-query": "^2.0.0",

"lodash": "^4.17.15",

"mini-css-extract-plugin": "^0.10.0",

"mixpanel-browser": "^2.40.0",

"moment-timezone": "^0.5.33",

"node-sass": "^4.13.1",

"normalizr": "^3.6.0",

"optimize-css-assets-webpack-plugin": "5.0.3",

"pluralize": "^8.0.0",

"pnp-webpack-plugin": "1.6.0",

"postcss-flexbugs-fixes": "4.1.0",

"postcss-loader": "3.0.0",

"postcss-normalize": "8.0.1",

"postcss-preset-env": "6.7.0",

"postcss-safe-parser": "4.0.1",

"query-string": "^6.12.0",

"quill-mention": "^3.1.0",

"rc-tree-select": "^4.1.2",

"react": "^16.13.0",

"react-add-to-homescreen": "^1.1.0",

"react-app-polyfill": "^1.0.6",

"react-cookie": "^4.0.3",

"react-dev-utils": "^10.2.0",

"react-device-detect": "^1.14.0",

"react-dnd": "^10.0.2",

"react-dnd-html5-backend": "^10.0.2",

"react-dom": "^16.13.0",

"react-helmet": "^6.1.0",

"react-hook-inview": "^4.3.8",

"react-html-parser": "^2.0.2",

"react-lines-ellipsis": "^0.14.1",

"react-markdown": "^5.0.3",

"react-material-ui-carousel": "^3.4.2",

"react-mixpanel": "^1.0.5",

"react-mixpanel-browser": "^3.1.4",

"react-quill": "2.0.0-beta.2",

"react-redux": "^7.2.0",

"react-router": "^5.1.2",

"react-router-dom": "^5.1.2",

"react-sortable-hoc": "^2.0.0",

"react-sticky": "^6.0.3",

"react-textarea-autosize": "^8.3.4",

"react-timeago": "^4.4.0",

"recharts": "^1.8.5",

"redux-persist": "^6.0.0",

"resolve": "1.15.0",

"resolve-url-loader": "3.1.1",

"sass-loader": "^7.3.1",

"semver": "6.3.0",

"smoothscroll-polyfill": "^0.4.4",

"style-loader": "^1.1.3",

"styled-components": "^5.3.6",

"terser-webpack-plugin": "2.3.4",

"timeago-react": "^3.0.0",

"ts-pnp": "1.1.5",

"ttl-counter": "^1.0.3",

"typescript": "~4.7.3",

"url-loader": "2.3.0",

"use-query-params": "^1.1.9",

"webpack": "4.41.5",

"webpack-dev-server": "3.10.2",

"webpack-manifest-plugin": "2.2.0",

"workbox-webpack-plugin": "4.3.1"

 },

"scripts": {

"start": "node scripts/start.js",

"serve": "serve -s -p 5000 build",

"build": "node --max-old-space-size=8192 scripts/build.js",

"build:serve": "yarn build && serve -s build",

"test": "node scripts/test.js --watchAll=false",

"test:watch": "yarn test --watchAll",

"test:coverage": "yarn test --coverage --watchAll=false",

"storybook": "start-storybook -p 6006",

"build-storybook": "build-storybook",

"cy:open": "NODE_ENV=production cypress open",

"cy:run": "NODE_ENV=production cypress run --record --key c41c26c5-1911-4c4c-982b-a298d215ae61",

"cy:build:open": "NODE_ENV=production start-server-and-test build:serve http://localhost:5000 cy:open",

"cy:build:run": "NODE_ENV=production start-server-and-test build:serve http://localhost:5000 cy:run",

"lint": "eslint './src/**' --quiet",

"lint-fix": "eslint './src/**' --fix"

 },

"eslintConfig": {

"extends": "react-app"

 },

"browserslist": {

"production": [

">0.2%",

"not dead",

"not op_mini all"

 ],

"staging": [

">0.2%",

"not dead",

"not op_mini all"

 ],

"development": [

"last 1 chrome version",

"last 1 firefox version",

"last 1 safari version"

 ]

 },

"babel": {

"presets": [

"react-app"

 ]

 },

"devDependencies": {

"@babel/helper-define-map": "^7.13.12",

"@babel/plugin-proposal-class-properties": "^7.13.0",

"@nodeworks/antd-scss-theme-plugin": "^2.0.3",

"@storybook/addon-actions": "^6.5.15",

"@storybook/addon-essentials": "^6.5.15",

"@storybook/addon-links": "^6.5.15",

"@storybook/react": "^6.5.15",

"@testing-library/cypress": "^8.0.2",

"@typescript-eslint/eslint-plugin": "^5.29.0",

"@typescript-eslint/parser": "^5.29.0",

"antd-scss-theme-plugin": "^1.0.8",

"cypress-dotenv": "^2.0.0",

"eslint": "^7.14.0",

"eslint-plugin-cypress": "^2.12.1",

"eslint-plugin-react": "^7.21.5",

"jsdom": "^17.0.0",

"less-loader": "^5.0.0",

"serve": "^12.0.0",

"start-server-and-test": "^1.12.5",

"storybook-readme": "^5.0.9",

"ts-jest": "^27.0.5",

"tsconfig-paths-webpack-plugin": "^3.3.0"

 }

}

Here is the bitbucket-pipelines.yml

image: node:14

definitions:

steps:

 - step: &test

name: Test

script:

 - yarn

 - yarn test --detectOpenHandles --forceExit --changedSince $BITBUCKET_BRANCH

 - step: &build

name: Build

size: 2x

script:

 - yarn

 - NODE_ENV=${BUILD_ENV} yarn build

artifacts:

 - build/**

 - step: &deploy_s3

name: Deploy to S3

script:

 - pipe: atlassian/aws-s3-deploy:0.3.8

variables:

AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID

AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY

AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION

S3_BUCKET: $S3_BUCKET

LOCAL_PATH: "./build/"

ACL: 'public-read'

 - step: &auto_merge_down

name: Auto Merge Down

script:

 - ./autoMerge.sh stage || true

 - ./autoMerge.sh dev || true

caches:

jest: /tmp/jest_*

node-dev: ./node_modules

node-stage: ./node_modules

node-release: ./node_modules

node-prod: ./node_modules

pipelines:

branches:

feature/optimize-build-sourcemaps-and-memory:

 - parallel:

fail-fast: true

steps:

# - step:

# caches:

# - node-release

# - jest

# <<: *test

 - step:

caches:

 - node-release

<<: *build

deployment: Release Env

dev:

 - parallel:

fail-fast: true

steps:

 - step:

caches:

 - node-dev

 - jest

<<: *test

 - step:

caches:

 - node-dev

<<: *build

deployment: Dev Env

 - step:

<<: *deploy_s3

deployment: Dev

stage:

 - parallel:

fail-fast: true

steps:

 - step:

caches:

 - node-stage

 - jest

<<: *test

 - step:

caches:

 - node-stage

<<: *build

deployment: Staging Env

 - step:

<<: *deploy_s3

deployment: Staging

prod:

 - parallel:

fail-fast: true

steps:

 - step:

caches:

 - node-prod

 - jest

<<: *test

 - step:

caches:

 - node-prod

<<: *build

deployment: Production Env

 - parallel:

steps:

 - step:

<<: *deploy_s3

deployment: Production

 - step:

<<: *auto_merge_down

[Patrik S]

Hello @Drew Gallagher ,

Welcome to Atlassian Community!

I found this thread in stackoverflow that suggests the usage of a slightly different syntax to define the browserlist in your package.json file.

They recommend changing the definition of the browserlist in package.json from 

 "browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},

To 

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],

You can try using that syntax and check if it works. Once you change the syntax, if you are using any Caches in your pipelines, it's also recommended to delete the caches before running the pipeline again. You can delete any existing Cache by going to the Pipelines page > Caches (on the top right corner) > Clicking on the Trash icon.

Also, as this error seems more related to node configuration rather than to Pipelines itself, I would recommend first trying to run it locally inside a docker container using the same image as you are using in the pipeline and once you fix the error locally, you can then push the changes to your bitbucket repository and the pipeline should run successfully. You can find detailed instructions on how to run it locally on Debug pipelines locally with Docker.

Thank you, @Drew Gallagher !

Patrik S