You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React项目构建时提示需配置目标浏览器,但package.json已存在browserslist的问题求助

React项目构建时提示需配置目标浏览器,但package.json已存在browserslist的问题求助

我遇到了一个特别困惑的问题,想请教各位帮忙排查一下。

在Bitbucket流水线中构建我的React项目时,执行的构建命令是:
node --max-old-space-size=8192 scripts/build.js
但构建过程中突然抛出了错误:

Failed to compile.
As of react-scripts >=2 you must specify targeted browsers.
Please add a browserslist key to your package.json.

可是我的package.json里明明已经配置了browserslist,而且看起来格式也没问题:

"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"
  ]
}

我已经按照文档给构建步骤配置了size: 2x来增加内存资源,会不会还是内存不足导致无法正常读取browserslist配置?下面是我的完整package.json和bitbucket-pipelines.yml配置,麻烦大家帮忙看看问题出在哪里?


完整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"
  }
}

Bitbucket流水线配置(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

我已经尝试过的思路

  • 按照文档给构建步骤配置了size: 2x来增加内存资源,但还是报同样的错误;
  • 反复确认package.json里的browserslist配置没有拼写错误;

希望大家能给点排查方向或者解决方案,非常感谢!


备注:内容来源于stack exchange,提问作者Drew Gallagher

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.23 09:27:46