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