[英]Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import' when deploying a create-react-app
我是 create-react-app 的新手。 我刚刚使用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>)
我没有做任何定制部署,只是推到生产。
这是完整的部署日志:
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
这是我的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"
}
}
我不明白为什么我会在我的生产代码中使用eslint
及其插件,以及如何解决这个问题。 你能帮我吗?
问题是添加了未安装在生产中的devDependencies
。 覆盖 eslint 配置是可以的,但所有需要的包都必须添加到主要dependencies
。
将所有Devdependencies
移至dependencies
并删除Devdependencies
为我解决了问题
从 package.json 中删除这一行对我有用:
"eslintConfig": {
"extends": "react-app"
}
我在我的 Visual Studio 代码上进行了更漂亮的设置。 我认为问题的出现是因为eslint配置与更漂亮的配置冲突。 还有另一个我没有尝试过的选项是安装eslint-config-prettier
。 这是关于它的文档: Integration Prettier with linters
出于某种原因,从我的 CRA package.json 中删除它在 VS Code 中为我工作:
"babel": {
"presets": [
"react-app"
]
}
本教程中的第 3 步对我有用:
在根文件夹中创建一个 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);
安装依赖:
npm install express express-favicon path
然后将 package.json 中的“start”脚本更改为
"start": "node server.js"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.