无法浏览部署到Heroku的React应用程序 [英] Failing to browse React application deployed to Heroku
问题描述
当在浏览器中写入 https://tictactoesko.herokuapp.com/时，我接收以下错误消息:
When wirite https://tictactoesko.herokuapp.com/ in a browser then I recive folowing error message:
无法编译./src/index.js模块构建失败:错误:无法找到模块'eslint/lib/formatters/stylish'
Failed to compile ./src/index.js Module build failed: Error: Cannot find module 'eslint/lib/formatters/stylish'
我的index.js看起来像这样从'react'导入React从'react-dom'导入ReactDOM导入'./index.css'从"./Game"导入游戏
My index.js look like this import React from 'react' import ReactDOM from 'react-dom' import './index.css' import Game from './Game'
ReactDOM.render(，document.getElementById('root'))
ReactDOM.render(, document.getElementById('root'))
我的package.json看起来像这样
My package.json looks like this
{
"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:-节点插件:sonarcloud:before_script:-npm开始--静音&脚本:-npm运行皮棉-npm测试-声纳扫描仪-Dsonar.projectKey = TicTacToe -Dsonar.organization = steinko-github -Dsonar.sources = src，test -Dsonar.host.url =
Here is the travis.yml language: node_js node_js: - node addons: sonarcloud: before_script: - npm start -- --silent & script: - npm run lint - npm test - sonar-scanner -Dsonar.projectKey=TicTacToe -Dsonar.organization=steinko-github -Dsonar.sources=src,test -Dsonar.host.url=https://sonarcloud.io -Dsonar.login=6472ac35c070752487408fd8c946cca6b536eec2 -Dsonar.javascript.lcov.reportPaths=coverage/lcov.info - $(npm bin)/cypress run --record --key a1319fd9-2c6e-4888-8f02-e62f02b5001b deploy: provider: heroku
api_key: secure: 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= app: tictactoesko
Heroku部署日志不完整，如下所示建立依赖关系安装节点模块(package.json + package-lock)截至11.521s----->缓存构建清除先前的节点缓存保存2个cacheDirectories(默认):-node_modules-bower_components(没有要缓存的内容)----->构建成功！----->发现过程类型Procfile声明类型->(无)buildpack的默认类型-> Web----->压缩...完成:57.4M----->正在启动...v11发布 https://tictactoesko.herokuapp.com/部署到Heroku
And the deployment log feom Heroku looks like this Building dependencies Installing node modules (package.json + package-lock) up to date in 11.521s -----> Caching build Clearing previous node cache Saving 2 cacheDirectories (default): - node_modules - bower_components (nothing to cache) -----> Build succeeded! -----> Discovering process types Procfile declares types -> (none) Default types for buildpack -> web -----> Compressing... Done: 57.4M -----> Launching... Released v11 https://tictactoesko.herokuapp.com/ deployed to Heroku
当在浏览器中写入 https://tictactoesko.herokuapp.com/时，我接收以下错误消息:
When wirite https://tictactoesko.herokuapp.com/ in a browser then I recive folowing error message:
无法编译./src/index.js模块构建失败:错误:无法查找模块'eslint/lib/formatters/stylish'我该如何纠正该错误?
Failed to compile ./src/index.js Module build failed: Error: Cannot find module 'eslint/lib/formatters/stylish' How could i correct this error?
推荐答案
您手动安装了 eslint ，这可能会导致问题.您应该将其卸载并仅编辑 .eslintrc 文件.在此Github中查看@gaearon的评论问题
You installed eslint manually and this can break things. You should uninstall it and edit just your .eslintrc file. Look the comments of @gaearon in this Github issue
但是，如果您希望直接控制并自定义所有内容.我将弹出项目: npm run弹出.检查创建React应用.
But if you wish to control directly and customize everything. I would eject the project: npm run eject. Check the guide of Create React App.
这篇关于无法浏览部署到Heroku的React应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
