React应用程序Heroku构建失败-git push Heroku master-预期为X，第1行出现解析错误:得到

Question

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

主要错误(下面列出的完整构建报告)显示， 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 input remote: remote: remote: npm ERR! code ELIFECYCLE remote: npm ERR! errno 1 remote: npm ERR! world-of-flags@0.1.0 build:react脚本构建 remote: npm ERR! Exit status 1

其中最令人困惑的部分是，当它说Parse error on line 1时，我无法弄清楚这个错误指的是哪个文件。根据阅读这个堆栈溢出问题(git-push-heroku master因解析错误而失败-哪个文件？)，我认为错误是指我的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构建最初由于奇怪的Parse error on line 1和unexpected end of input错误而失败。这是因为heroku没有识别我最近添加到应用程序中的SASS媒体查询。当我评论媒体查询时，heroku构建/部署工作正常，至少根据heroku的构建日志是这样。

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

我试图通过安装webpack来解决这个问题，这造成了更多的问题，因为由于我之前在全球范围内安装了webpack，heroku很困惑，因为我安装了两个不同的版本。我在我的heroku构建中收到了错误消息，上面写着This project requires webpack version 4.19 but a later version 4.28 was found higher up(不是确切的单词，但我再也找不到确切的错误消息了)。

解决方案：

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

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

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

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

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

6. 运行npm install。在此之后，heroku构建/部署工作正常，我可以在部署链接上查看内容。

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

Answer 2

Heroku想要构建自己的。

您可以安装一些构建包。如果这是CRA应用程序。。。

从命令行：heroku create --buildpack https://github.com/mars/create-react-app-buildpack.git