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
相关产品推荐
相关产品推荐

