当我尝试在 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
最佳答案
经过一整天的工作,我终于能够解决问题并将应用程序部署到 Heroku。我总结一下,其中很大一部分是在 package.json 和我的计算机上安装某些节点模块的方式,即 node-sass
、sass-loader
和 webpack
。
我必须解决的问题:
heroku 构建最初因第 1 行出现奇怪的
解析错误
和意外的输入结束
错误而失败。事实证明,这是因为 heroku 无法识别我最近添加到应用程序中的 SASS 媒体查询。当我评论媒体查询时,heroku 构建/部署工作正常,至少根据它的heroku 构建日志来看是这样。接下来,虽然构建“有效”,但当我实际访问部署链接时,我收到控制台错误,提示我必须安装
node-sass
。这非常烦人,因为我的 package.json 中的 devDependency 下有node-sass
,我认为这已经足够了,但显然你希望它列在 下依赖关系。我一直尝试安装node-sass
但部署的站点根本无法识别它。
我试图通过安装 webpack
来解决这个问题,但这会产生更多问题,因为我之前已经全局安装了 webpack,heroku 很困惑,因为我安装了 2 个不同的版本。我在我的heroku构建中收到错误消息,上面写着This项目需要webpack版本4.19,但在更高的位置找到了更高的版本4.28
(不是确切的单词,但我再也找不到确切的错误消息) 。
解决方案:
在项目根文件夹和我的主用户中卸载
node-sass
、sass-loader
和webpack
我计算机上的文件夹。全局卸载我之前全局安装的特定版本的 webpack。
使用
webpack --version
验证项目文件夹或主计算机根文件夹中不存在 webpack 版本。删除项目根文件夹和我的主用户文件夹中的
node_modules
和package-lock.json
。重新安装
node-sass
和sass-loader
。以前,这些显示在 devDependency 下的 package.json 中,完成上述所有步骤后,它们就会显示在 dependency 下,这正是我想要的。运行
npm install
。此后,heroku 构建/部署开始工作,我能够查看部署链接上的内容。
我希望这有帮助。祝你好运!
关于javascript - React 应用程序 Heroku 构建失败 - git Push heroku master - 第 1 行 : got unexpected end of input. 哪个文件的第 1 行出现 X,解析错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54271486/