[英]Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import' when deploying a create-react-app
I'm new to create-react-app.我是 create-react-app 的新手。 I just made a quick setup with redux
and react-router-dom
which builds nicely on my computer using yarn build
, but when pushing to Scalingo or Heroku the build fails with the following error:我刚刚使用redux
和react-router-dom
进行了快速设置,它使用yarn build
在我的计算机上很好地yarn build
,但是当推送到 Scalingo 或 Heroku 时,构建失败并出现以下错误:
./src/index.jsx
Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import'
Referenced from:
at Array.forEach (<anonymous>)
at Array.reduceRight (<anonymous>)
I did not do anything to customize deployment, just pushed to production.我没有做任何定制部署,只是推到生产。
Here is the full deployment log :这是完整的部署日志:
Enumerating objects: 74, done.
Counting objects: 100% (74/74), done.
Delta compression using up to 4 threads
Compressing objects: 100% (68/68), done.
Writing objects: 100% (74/74), 185.95 KiB | 4.77 MiB/s, done.
Total 74 (delta 20), reused 15 (delta 0)
<-- Start deployment of xxx-app-staging -->
Fetching source code
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=true
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
engines.yarn (package.json): unspecified (use default)
Resolving node version 8.x...
Downloading and installing node 8.15.0...
Using default npm version: 6.4.1
Resolving yarn version 1.x...
Downloading and installing yarn (1.14.0)...
Installed yarn 1.14.0
-----> Restoring cache
Skipping cache restore (not-found)
-----> Building dependencies
Installing node modules (yarn.lock)
yarn install v1.14.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.7: The platform "linux" is incompatible with this module.
info "fsevents@1.2.7" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > eslint-plugin-react@7.12.4" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0".
warning "react-scripts > pnp-webpack-plugin > ts-pnp@1.0.0" has unmet peer dependency "typescript@*".
warning " > eslint-config-airbnb@17.1.0" has unmet peer dependency "eslint@^4.19.1 || ^5.3.0".
warning "eslint-config-airbnb > eslint-config-airbnb-base@13.1.0" has unmet peer dependency "eslint@^4.19.1 || ^5.3.0".
warning " > eslint-plugin-import@2.16.0" has unmet peer dependency "eslint@2.x - 5.x".
warning " > eslint-plugin-jsx-a11y@6.2.1" has unmet peer dependency "eslint@^3 || ^4 || ^5".
[4/4] Building fresh packages...
Done in 12.22s.
Running build (yarn)
yarn run v1.14.0
$ react-scripts build
Creating an optimized production build...
Failed to compile.
./src/index.jsx
Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import'
Referenced from:
at Array.forEach (<anonymous>)
at Array.reduceRight (<anonymous>)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-----> Build failed
We're sorry this build is failing!
Some possible problems:
- A module may be missing from 'dependencies' in package.json
http://doc.scalingo.com/languages/javascript/nodejs#ensure-youre-tracking-all-your-dependencies
- This module may be specified in 'devDependencies' instead of 'dependencies'
http://doc.scalingo.com/languages/javascript/nodejs#install-devdependencies
Keep coding,
Scalingo
! An error occured during buildpack compilation
! Error deploying the application
! → Invalid return code from buildpack
And here is my package.json
:这是我的package.json
:
{
"name": "xxxx",
"version": "0.1.0",
"private": true,
"dependencies": {
"@sentry/browser": "^4.5.4",
"prop-types": "^15.7.1",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-redux": "^6.0.0",
"react-redux-i18n": "^1.9.3",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4"
}
}
I can't understand why would I have any usage of eslint
and its plugins in my production code, and how to fix this.我不明白为什么我会在我的生产代码中使用eslint
及其插件,以及如何解决这个问题。 Can you help?你能帮我吗?
The problem was adding devDependencies
which are not installed in production.问题是添加了未安装在生产中的devDependencies
。 Overriding eslint config is ok but all needed packages has to be added to the main dependencies
.覆盖 eslint 配置是可以的,但所有需要的包都必须添加到主要dependencies
。
Move all your Devdependencies
to dependencies
and delete the Devdependencies
将所有Devdependencies
移至dependencies
并删除Devdependencies
Solved the problem for me为我解决了问题
Removing this line from package.json worked for me:从 package.json 中删除这一行对我有用:
"eslintConfig": {
"extends": "react-app"
}
I have prettier set up on my visual studio code.我在我的 Visual Studio 代码上进行了更漂亮的设置。 I think the issue arises because of the eslint config conflicts with prettier.我认为问题的出现是因为eslint配置与更漂亮的配置冲突。 There's also another option which I have not tried which is installing eslint-config-prettier
.还有另一个我没有尝试过的选项是安装eslint-config-prettier
。 Here are the documentation on it: Integration Prettier with linters这是关于它的文档: Integration Prettier with linters
For some reason removing this from my CRA package.json worked for me in VS Code:出于某种原因,从我的 CRA package.json 中删除它在 VS Code 中为我工作:
"babel": {
"presets": [
"react-app"
]
}
Step 3 from this tutorial worked for me:本教程中的第 3 步对我有用:
https://medium.com/jeremy-gottfrieds-tech-blog/tutorial-how-to-deploy-a-production-react-app-to-heroku-c4831dfcfa08 https://medium.com/jeremy-gottfrieds-tech-blog/tutorial-how-to-deploy-a-production-react-app-to-heroku-c4831dfcfa08
Creating an Express JS server in the root folder to serve the production build在根文件夹中创建一个 Express JS 服务器来为生产构建提供服务
//server.js
const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);
Installing dependencies:安装依赖:
npm install express express-favicon path
Then changing the "start" script in package.json to然后将 package.json 中的“start”脚本更改为
"start": "node server.js"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.