javascript - React 应用程序 Heroku 构建失败 - git Push heroku master - 第 1 行 : got unexpected end of input. 哪个文件的第 1 行出现 X，解析错误？

Question

当我尝试在 Heroku 中构建昨天成功构建的 React 应用程序时，运行 git push heroku master 时遇到非常令人困惑的解析错误。从那时起，唯一的变化是另一个贡献者添加到几个 .scss 文件中的一些媒体查询。

主要错误(下面列出了完整的构建报告)如下: 远程:编译失败。 偏僻的: 远程:第 1 行解析错误: 远程:^ 远程:需要“CALC”、“LPAREN”、“SUB”、“NUMBER”、“FUNCTION”、“LENGTH”、“ANGLE”、“TIME”、“FREQ”、“RES”、“EMS”、“EXS” 、“CHS”、“REMS”、“VHS”、“VWS”、“VMINS”、“VMAXS”、“PERCENTAGE”、“表达式”、“数学表达式”、“值”、“函数”、“css_value”、得到输入意外结束 偏僻的: 偏僻的: 远程:npm 错误!代码 生命周期 远程:npm 错误!错误号1 远程:npm 错误! world-of-flags@0.1.0 构建:react-scripts 构建 远程:npm 错误!退出状态1

最令人困惑的部分是，当它显示 Parse error on line 1 时，我无法弄清楚该错误指的是哪个文件。基于阅读这个堆栈溢出问题( git push heroku master fails with parse error - which file? )，我假设错误是指我的 package.json 文件。但是，我找不到任何问题。对此的任何帮助将不胜感激。

package.json

{
  "name": "world-of-flags",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "dotenv": "^6.2.0",
    "enzyme": "^3.8.0",
    "node-sass": "^4.11.0",
    "prop-types": "^15.6.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.1.3",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.7",
    "redux-thunk": "^2.3.0"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!src/index.js",
      "!src/serviceWorker.js",
      "!src/setupTests.js",
      "!src/history.js",
      "!src/reducers/index.js",
      "!src/mockData/mockData.js",
      "!src/utilities/allCountries.js",
      "!src/utilities/allCountriesImagesObject.js",
      "!src/utilities/allCountriesObjects.js"
    ]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "eslint": "./node_modules/eslint/bin/eslint.js ./src/*.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "enzyme-adapter-react-16": "^1.7.1",
    "jshint": "^2.9.7",
    "prettier": "1.15.3",
    "resolve-url-loader": "^3.0.0"
  },
  "prettier": {
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true
  }
}

完整的 Heroku 构建日志

-----> React.js (create-react-app) multi app detected
-----> Configure create-react-app build environment
       Using `NODE_ENV=development`
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=false
       NODE_ENV=development
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 10.x...
       Downloading and installing node 10.15.0...
       Using default npm version: 6.4.1
       
-----> Restoring cache
       - node_modules
       
-----> Building dependencies
       Installing node modules (package.json + package-lock)
       added 212 packages from 12 contributors, removed 4 packages, updated 98 packages and audited 36629 packages in 28.481s
       found 0 vulnerabilities
       
       
-----> Caching build
       - node_modules
       
-----> Pruning devDependencies
       Skipping because NODE_ENV is not 'production'
       
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
       Writing `static.json` to support create-react-app
       Enabling runtime environment variables
> world-of-flags@0.1.0 build /tmp/build_768ef9fd4678f7cb022271fe96647f94
> react-scripts build
Creating an optimized production build...
Failed to compile.
Parse error on line 1: 
^
Expecting "CALC", "LPAREN", "SUB", "NUMBER", "FUNCTION", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "expression", "math_expression", "value", "function", "css_value", got unexpected end of input
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! world-of-flags@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the world-of-flags@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /app/.npm/_logs/2019-01-19T21_04_11_353Z-debug.log
 !     Push rejected, failed to compile React.js (create-react-app) multi app.
 !     Push failed

Answer 1

经过一整天的工作，我终于能够解决问题并将应用程序部署到 Heroku。我总结一下，其中很大一部分是在 package.json 和我的计算机上安装某些节点模块的方式，即 node-sass、sass-loader 和 webpack。

我必须解决的问题:

1. heroku 构建最初因第 1 行出现奇怪的解析错误和意外的输入结束错误而失败。事实证明，这是因为 heroku 无法识别我最近添加到应用程序中的 SASS 媒体查询。当我评论媒体查询时，heroku 构建/部署工作正常，至少根据它的heroku 构建日志来看是这样。

2. 接下来，虽然构建“有效”，但当我实际访问部署链接时，我收到控制台错误，提示我必须安装 node-sass。这非常烦人，因为我的 package.json 中的 devDependency 下有 node-sass ，我认为这已经足够了，但显然你希望它列在 下依赖关系。我一直尝试安装 node-sass 但部署的站点根本无法识别它。

我试图通过安装 webpack 来解决这个问题，但这会产生更多问题，因为我之前已经全局安装了 webpack，heroku 很困惑，因为我安装了 2 个不同的版本。我在我的heroku构建中收到错误消息，上面写着This项目需要webpack版本4.19，但在更高的位置找到了更高的版本4.28(不是确切的单词，但我再也找不到确切的错误消息) 。

解决方案:

1. 在项目根文件夹和我的主用户中卸载 node-sass、sass-loader 和 webpack我计算机上的文件夹。

2. 全局卸载我之前全局安装的特定版本的 webpack。

3. 使用 webpack --version 验证项目文件夹或主计算机根文件夹中不存在 webpack 版本。

4. 删除项目根文件夹和我的主用户文件夹中的 node_modules 和 package-lock.json。

5. 重新安装node-sass和sass-loader。以前，这些显示在 devDependency 下的 package.json 中，完成上述所有步骤后，它们就会显示在 dependency 下，这正是我想要的。

6. 运行npm install。此后，heroku 构建/部署开始工作，我能够查看部署链接上的内容。

我希望这有帮助。祝你好运!