无法浏览部署到 Heroku 的 React 应用程序
Posted
技术标签:
【中文标题】无法浏览部署到 Heroku 的 React 应用程序【英文标题】:Failing to browse React application deployed to Heroku 【发布时间】:2018-08-07 22:34:19 【问题描述】:当在浏览器中写入https://tictactoesko.herokuapp.com/ 时,我 收到以下错误消息:
编译失败 ./src/index.js 模块构建失败:错误:不能 查找模块 'eslint/lib/formatters/stylish'
我的 index.js 看起来像这样 从“反应”导入反应 从 'react-dom' 导入 ReactDOM 导入'./index.css' 从'./Game'导入游戏
ReactDOM.render(, document.getElementById('root'))
我的 package.json 看起来像这样
"name": "tic-tac-toe",
"version": "0.1.0",
"private": true,
"eslintConfig":
"env":
"es6": true
,
"parserOptions":
"ecmaVersion": 8,
"sourceType": "module",
"ecmaFeatures":
"jsx": true
,
"extends": [
"standard",
"react-app",
"plugin:jsx-a11y/recommended"
],
"plugins": [
"jsx-a11y",
"react"
],
"rules":
"no-trailing-spaces": "off",
"padded-blocks":"off",
"jsx-a11y/href-no-hash":"off"
,
"jest":
"testMatch": [
"**/test/**/*.js?(x)"
],
"collectCoverage": true,
"coverageDirectory": "coverage",
"coverageThreshold":
"global":
"branches": 100,
"functions": 100,
"lines": 100,
"statements": 100
,
"dependencies":
"chromedriver": "^2.35.0",
"jest-cli": "^22.3.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1",
"selenium-webdriver": "^4.0.0-alpha.1"
,
"scripts":
"start": "react-scripts start",
"build": "react-scripts build",
"lint": "./node_modules/.bin/eslint src/** test/** ",
"test": "jest",
"eject": "react-scripts eject",
"cypress:open": "cypress open"
,
"devDependencies":
"babel-eslint": "^7.2.3",
"babel-jest": "^22.2.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"cypress": "^2.0.3",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.18.1",
"eslint-config-google": "^0.9.1",
"eslint-config-react-app": "^2.1.0",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-react": "^7.7.0",
"eslint-plugin-standard": "^3.0.1",
"jest": "^22.3.0",
"react-test-renderer": "^16.2.0"
这里是 travis.yml 语言:node_js node_js: - 节点插件:声纳云:before_script: - npm start -- --silent & 脚本: - npm 运行 lint - npm 测试 -声纳扫描仪 -Dsonar.projectKey=TicTacToe -Dsonar.organization=steinko-github -Dsonar.sources=src,test -Dsonar.host.url=https://sonarcloud.io -Dsonar.login=6472ac35c070752487408fd8c946cca6b536eec2 -Dsonar.javascript.lcov.reportPaths =覆盖/lcov.info - $(npm bin)/cypress run --record --key a1319fd9-2c6e-4888-8f02-e62f02b5001b 部署:提供者:heroku api_key: 确保:iHZKdF2ZoiXshgTeDfAR8YjhChchFLMSAxU9i62eB / XGzj6VQ2iV9RS9OnD + dfOJAebk40rtEbyxv9Vx4RXBsWCNVMifg6rMoAiW9Bp3Us8Idw5f2kLKD0Sx6qzNZqdn9TzQT3EU12jLjIgpUse9PfJxisd / HZqmtdYQdJCMGcgOZk4lZJmbpe8tmCcU0tnUPxJnuDPUzkrViAK3pe / T8 / m1mdZAZ4 + 2mAIXuJzsf // JJimdwIE3ZqSoxQjEo9l4QmXcdStrC3iAx + GLgjt2j9Rf0ERnuKYPdfSxPUw8O4 / tJHEyF32E + mUPNxX1PvEyzkP6NtBss / 288W0NPg42rxilEivNeJxWS8fGgUyQx52dHXcBZEdPOsye233WtEHvlIYzDj2Gp + IqD6Q2phptobqK7XJuyM7xS3QH8Yao / JB2ZYz9PnZzngsfC3cohgxFJ3YjWVmfy87Y / BB5JBVAXARMwg6zvKKt + lHdsVbR3CcHN01S9wG4YgdiAViaIa5vEOUcI7OCGRdYlyJTKau4ENj / DahPxG + L7 + wbrx292kL / 9zgg0fINaByBOg + YSJN / OMQOphNMQZR / gUpf / N1T6uZVogH +ZgzY7XXtSRI3EFl4GgIcHFxoNulvNRmJOR04sK0cyznuwifmLjGiuxGCUeI9MUbSoAiNws7KrK6i9uw= 应用程序:tictactoesko
feom Heroku 的部署日志是这样的 建立依赖关系 安装节点模块(package.json + package-lock) 在 11.521 秒内更新 -----> 缓存构建 清除上一个节点缓存 保存 2 个缓存目录(默认): - 节点模块 - bower_components(没有缓存) -----> 构建成功! -----> 发现进程类型 Procfile 声明类型->(无) buildpack -> web 的默认类型 -----> 压缩... 完成:57.4M -----> 正在启动... 发布 v11 https://tictactoesko.herokuapp.com/ 部署到 Heroku
当在浏览器中写入https://tictactoesko.herokuapp.com/ 时,我 收到以下错误消息:
编译失败 ./src/index.js 模块构建失败:错误:不能 查找模块 'eslint/lib/formatters/stylish' 我该如何纠正这个错误?
【问题讨论】:
【参考方案1】:您手动安装了eslint
,这可能会破坏事情。您应该卸载它并只编辑您的.eslintrc
文件。在这个 Github 中查看 @gaearon 的 cmets issue
但是,如果您希望直接控制和自定义所有内容。我会退出项目:npm run eject
。查看Create React App的指南。
【讨论】:
以上是关于无法浏览部署到 Heroku 的 React 应用程序的主要内容,如果未能解决你的问题,请参考以下文章
如何将react-native-web应用程序部署到heroku?
Dockerized React App 无法绑定到 Heroku 上的 $PORT