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

Question

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 · Answer

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