在 5 年历史的项目中启动纱线上的 React-scripts 令牌错误 - 在其他机器上工作

Question

我在一个已有 5 年历史的 React 项目中遇到了一个问题，其中反应脚本无法识别令牌，从而导致错误。该项目在生产服务器和其他开发人员的机器上运行得很好，但我在我的系统上遇到了这个问题。

我试图避免修改 package.json 文件，因为代码在其他地方工作没有问题。

这是我正在使用的有问题的命令：

YARN PORT=5555 NODE_OPTIONS=--openssl-legacy-provider doppler run -- craco start

此构建命令可以正常工作，没有任何问题：

doppler run -- env NODE_OPTIONS=--openssl-legacy-provider craco --max-old-space-size=8192 build

{
    "name": "skillstrainer-admin-client",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@apollo/client": "^3.4.10",
      "@ckeditor/ckeditor5-build-classic": "^41.1.0",
      "@ckeditor/ckeditor5-react": "^6.2.0",
      "@craco/craco": "^6.3.0",
      "@emotion/react": "^11.7.1",
      "@headlessui/react": "^1.4.0",
      "@heroicons/react": "^1.0.3",
      "@progress/kendo-drawing": "^1.16.3",
      "@progress/kendo-licensing": "^1.2.2",
      "@progress/kendo-react-pdf": "^5.5.0",
      "@react-pdf/renderer": "^2.1.1",
      "@testing-library/jest-dom": "^5.11.4",
      "@testing-library/react": "^11.1.0",
      "@testing-library/user-event": "^12.1.10",
      "async_hooks": "^1.0.0",
      "axios": "^0.21.1",
      "base-64": "^1.0.0",
      "bluebird": "^3.7.2",
      "bootstrap": "^5.0.2",
      "boxicons": "^2.0.9",
      "browser-monads": "^1.0.0",
      "caniuse-lite": "1.0.30001632",
      "daisyui": "^2.11.0",
      "dateformat": "^5.0.2",
      "easyinvoice": "^2.3.3",
      "file-saver": "^2.0.5",
      "formik": "2.2.9",
      "grapesjs": "^0.20.1",
      "grapesjs-blocks-basic": "^1.0.1",
      "grapesjs-mjml": "^0.6.0",
      "grapesjs-plugin-forms": "^2.0.5",
      "grapesjs-preset-webpage": "^1.0.1",
      "grapesjs-react": "^4.0.1",
      "graphql": "^15.5.2",
      "html2pdf.js": "^0.10.1",
      "json2csv": "^6.0.0-alpha.2",
      "jszip": "^3.10.1",
      "lodash": "^4.17.21",
      "moment": "^2.29.1",
      "mongoose": "^7.5.0",
      "papaparse": "^5.3.1",
      "pdf-lib": "^1.17.1",
      "query-string": "^7.0.1",
      "react": "^17.0.2",
      "react-beautiful-dnd": "^13.1.0",
      "react-bootstrap": "^2.0.4",
      "react-chartjs-2": "^5.2.0",
      "react-csv": "^2.2.2",
      "react-data-table-component": "^7.4.5",
      "react-datepicker": "^4.5.0",
      "react-datetime-picker": "^3.4.3",
      "react-dnd": "^15.1.1",
      "react-dnd-html5-backend": "^15.1.2",
      "react-dom": "^17.0.2",
      "react-drag-drop-files": "^2.3.7",
      "react-draggable": "^4.4.6",
      "react-dropzone": "^11.5.3",
      "react-fileupload-progress": "^0.5.0",
      "react-icons": "^4.3.1",
      "react-pdf": "^9.1.1",
      "react-qr-code": "^2.0.7",
      "react-quiz-component": "^0.3.9",
      "react-redux": "^7.2.6",
      "react-router": "^5.2.0",
      "react-router-dom": "^5.2.0",
      "react-scripts": "4.0.3",
      "react-scroll": "^1.8.7",
      "react-scroll-into-view": "^1.12.0",
      "react-select": "^5.3.2",
      "react-simple-timefield": "^3.2.5",
      "react-time-picker": "^4.4.4",
      "react-toastify": "^8.2.0",
      "react-uuid": "^2.0.0",
      "recharts": "^2.5.0",
      "recoil": "^0.6.1",
      "redux": "^4.1.2",
      "redux-devtools-extension": "^2.13.9",
      "redux-thunk": "^2.4.1",
      "sty": "^0.6.1",
      "styled-components": "^5.3.0",
      "web-vitals": "^1.0.1",
      "yup": "^0.32.11"
    },
    "scripts": {
      "start": "PORT=5555 NODE_OPTIONS=--openssl-legacy-provider doppler run -- craco start",
      "staging": "REACT_APP_BUILD_ENV=staging PORT=5555 craco start",
      "staging_openssl": "NODE_OPTIONS=--openssl-legacy-provider REACT_APP_BUILD_ENV=staging PORT=5555 craco start",
      "prod": "REACT_APP_BUILD_ENV=production PORT=5555 craco start",
      "dev": "REACT_APP_BUILD_ENV=dev PORT=5555 craco start",
      "build": "craco --max-old-space-size=8192 build",
      "build-staging": "REACT_APP_BUILD_ENV=staging craco --max-old-space-size=4096 build",
      "build-prod": "REACT_APP_BUILD_ENV=production craco --max-old-space-size=4096 build",
      "build-raw": "craco --max-old-space-size=8192 build",
      "test": "craco test"
    },
    "eslintConfig": {
      "extends": [
        "react-app",
        "react-app/jest"
      ]
    },
    "devDependencies": {
      "autoprefixer": "^9.8.8",
      "postcss": "^7.0.39",
      "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
    },
    "resolutions": {
      "caniuse-lite": "1.0.30001632"
    },
    "browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
}

我尝试解决此错误的方法：

1. 将反应脚本更新到最新
2. yarn 添加 @babel/core @babel/preset-env --dev#
3. 添加选项：{presets: ['@babel/preset-env', '@babel/preset-react'] }到craco配置。

Answer 1

错误是

You may need an additional loader to handle...

。可能是你的

babel-loader

无法处理符号

??

；

@babel/plugin-transform-nullish-coalescing-operator

可以转换nullish合并运算符

(??)

，虽然这个插件包含在@babel/preset-env中，但在ES2020中，你可以尝试将此插件添加到你的craco配置中； 如果该项目在生产服务器和其他开发人员的计算机上运行得很好，请检查其他开发人员使用的 Node.js 版本并确保您的版本匹配，删除

node_modules

并重新安装。