React应用程序Heroku构建失败-git push heroku master-预期X，第1行出现解析错误，输入意外结束。 哪个文件的第1行？

Question

尝试在昨天成功构建的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 input remote: remote: remote: npm ERR! code ELIFECYCLE remote: npm ERR! errno 1 remote: npm ERR! world-of-flags@0.1.0 build:读取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: 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: 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-scripts构建remote: npm ERR! Exit status 1 remote: npm ERR! Exit status 1

最令人困惑的部分是当Parse error on line 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. 由于Parse error on line 1奇怪的Parse error on line 1以及unexpected end of input错误unexpected end of input heroku构建最初失败了。 原来是因为heroku无法识别我最近添加到应用程序中的SASS媒体查询。 当我评论媒体查询时，heroku构建/部署有效，至少根据它所做的heroku构建日志而言。

2. 接下来，尽管构建工作正常，但是当我实际访问部署链接时，出现控制台错误，提示我必须安装node-sass 。 这很烦人，因为我在devDependencies下的package.json中拥有node-sass ，我认为这已经足够了，但是显然您希望将其列在dependencies下。 我一直尝试安装node-sass但是部署的站点根本无法识别它。

我试图通过安装webpack来解决此问题，这造成了更多的问题，因为自从我以前在全球范围内安装了webpack以来，heroku都很困惑，因为我安装了2个不同的版本。 我在heroku构建中收到错误消息， This project requires webpack version 4.19 but a later version 4.28 was found higher up一些内容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 。 以前这些表明了在devDependencies下的package.json，并在完成上述所有步骤，他们再根据依赖关系 ，这是我想要的东西出现了。

6. 运行npm install 。 在此之后，heroku的构建/部署成功了，我能够在部署链接上查看内容。

我希望这有帮助。 祝好运！

Answer 2

Heroku希望自己建造。

您可以安装一些buildpack 。 如果这是CRA应用...

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