尝试在昨天成功构建的Heroku中构建React应用时，运行git push heroku master时遇到一个非常令人困惑的解析错误。此后唯一的变化就是一些媒体查询，另一个贡献者添加到了几个.scss文件中。
主要错误（下面列出了完整的构建报告）显示为：remote: Failed to compile.remote:remote: Parse error on line 1:remote: ^remote: 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 inputremote:remote:remote: npm ERR! code ELIFECYCLEremote: npm ERR! errno 1remote: npm ERR! world-of-flags@0.1.0 build:反应脚本构建remote: npm ERR! Exit status 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最佳答案
经过一整天的工作，我终于能够解决问题并将该应用程序部署到Heroku。我的总结是，其中很大一部分是某些节点模块在package.json和我的计算机上安装的方式，即node-sass，sass-loader和webpack。
我必须解决的问题：
由于奇怪的Parse error on line 1和unexpected end of input错误，heroku构建最初失败了。原来是因为heroku无法识别我最近添加到应用程序中的SASS媒体查询。当我评论媒体查询时，heroku构建/部署有效，至少根据它所做的heroku构建日志而言。
接下来，尽管构建工作正常，但是当我实际访问部署链接时，出现控制台错误，提示我必须安装node-sass。这非常令人讨厌，因为我在devDependencies下的package.json中有node-sass，我认为这已经足够了，但是显然您希望将其列在依赖项下。我一直尝试安装node-sass，但是部署的站点根本无法识别它。
我试图通过安装webpack来解决此问题，这造成了更多问题，因为自从我以前全局安装了webpack以来，heroku感到困惑，因为我安装了2个不同的版本。我在heroku构建中收到一条错误消息，内容为This project requires webpack version 4.19 but a later version 4.28 was found higher up（不是确切的单词，但我找不到确切的错误消息了）。
解决方案：
分别在项目根文件夹和计算机的主用户文件夹中卸载node-sass，sass-loader和webpack。
全局卸载我之前全局安装的特定版本的webpack。
使用webpack --version验证项目文件夹或主计算机根文件夹中不存在webpack版本。
删除项目根文件夹和主用户文件夹中的node_modules和package-lock.json。
重新安装node-sass和sass-loader。以前，这些显示在devDependencies下的package.json中，完成上述所有步骤后，它们随后将显示在依赖项下，这就是我想要的。
运行npm install。在此之后，heroku的构建/部署成功了，我能够在部署链接上查看内容。
我希望这有帮助。祝好运！
关于javascript - React应用程序Heroku构建失败-git push heroku master-预期X，第1行出现解析错误，输入意外结束。哪个文件的第1行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54271486/