即使在删除 node_modules 和 npm install 后安装新包时也无法修复编译错误
Posted
技术标签:
【中文标题】即使在删除 node_modules 和 npm install 后安装新包时也无法修复编译错误【英文标题】:Unable to fix compilation error while installing new package even after deleting node_modules and npm install 【发布时间】:2021-06-10 00:26:51 【问题描述】:我按照here 的说明安装了 react-select-virtualized,如下所示
tan@MXL9492NNH MINGW64 /c/tan/projectlens/testing related folders/for_npm_react_virtualized_testing/projectexplorer (develop)
$ npm install --save react-select-virtualized
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN rm not removing C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\.bin\uglifyjs.cmd as it wasn't installed by C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\uglify-js
npm WARN rm not removing C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\.bin\uglifyjs as it wasn't installed by C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\uglify-js
npm WARN rm not removing C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\.bin\semver.cmd as it wasn't installed by C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\semver
npm WARN rm not removing C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\.bin\semver as it wasn't installed by C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\semver
npm WARN rm not removing C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\.bin\json5.cmd as it wasn't installed by C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\json5
npm WARN rm not removing C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\.bin\json5 as it wasn't installed by C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\json5
> @fortawesome/fontawesome-common-types@0.2.34 postinstall C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\@fortawesome\fontawesome-common-types
> node attribution.js
Font Awesome Free 0.2.34 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
> core-js@2.6.12 postinstall C:\tan\projectlens\testing related folders\for_npm_react_virtualized_testing\projectexplorer\node_modules\core-js
> node -e "tryrequire('./postinstall')catch(e)"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling javascript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\@babel\cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")
npm WARN bootstrap@4.6.0 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.6.0 requires a peer of popper.js@^1.16.1 but none is installed. You must install peer dependencies yourself.
npm WARN primereact@4.2.2 requires a peer of classnames@^2.2.6 but none is installed. You must install peer dependencies yourself.
npm WARN react-select-virtualized@3.0.0 requires a peer of react@16.13.1 but none is installed. You must install peer dependencies yourself.
npm WARN react-select-virtualized@3.0.0 requires a peer of react-dom@16.13.1 but none is installed. You must install peer dependencies yourself.
npm WARN react-select-virtualized@3.0.0 requires a peer of react-select@4.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-select-virtualized@3.0.0 requires a peer of react-virtualized@9.22.2 but none is installed. You must install peer dependencies yourself.
npm WARN ldapdemo@0.0.1 No repository field.
+ react-select-virtualized@3.0.0
added 101 packages from 83 contributors, removed 54 packages, updated 1057 packages and audited 1222 packages in 109.002s
53 packages are looking for funding
run `npm fund` for details
found 3 vulnerabilities (1 moderate, 2 high)
run `npm audit fix` to fix them, or `npm audit` for details
当我这样启动我的应用程序时:
yarn run local
,没有编译并显示如下错误:
i 「wdm」: Failed to compile.
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'
所以我删除了node_modules
文件夹,然后按照this post 中的说明删除了npm install
:
编译成功。但是,当我将它包含在我的代码中时,如下所示:
import Select as SecondSelect from 'react-select-virtualized';
再次抛出同样的错误:
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
1 module
i 「wdm」: Failed to compile.
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'
如何解决这个问题?
这是我的 package.json
"name": "ldapdemo",
"version": "0.0.1",
"description": "Project Lens",
"main": "index.js",
"author": "Tan",
"license": "MIT",
"scripts":
"local": "webpack-dev-server --env.REACT_APP_ROUTER_BASE= --env.REACT_APP_USERNAME=tan --mode development --inline",
"dev": "webpack --env.REACT_APP_ROUTER_BASE= --env.REACT_APP_USERNAME=tan --mode development ./src/main/js/app.js --output ./src/main/resources/static/built/bundle.js",
"build": "webpack --mode production ./src/main/js/app.js ",
"webpack-prod": "webpack -p --progress --config=config/webpack.prod.js --mode production ./src/main/js/app.js"
,
"dependencies":
"@babel/plugin-proposal-throw-expressions": "^7.2.0",
"@emotion/core": "^10.0.27",
"@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/free-solid-svg-icons": "^5.12.1",
"@fortawesome/react-fontawesome": "^0.1.9",
"@material-ui/core": "^4.8.3",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.46",
"@types/react": "^16.4.2",
"@types/react-dom": "^16.4.2",
"@types/react-router-dom": "^4.3.4",
"@types/styled-jsx": "^2.2.8",
"awesome-typescript-loader": "^5.2.1",
"axios": "^0.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"bootstrap": "^4.1.3",
"classnames": "^2.2.6",
"css-loader": "^1.0.0",
"csstype": "^2.6.8",
"formik": "^2.1.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jqwidgets-scripts": "^7.2.0",
"lodash": "^4.17.15",
"primeflex": "^1.1.1",
"primeicons": "^4.0.0",
"primereact": "4.2.2",
"react": "^16.4.2",
"react-autosuggest": "^9.4.2",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.4.2",
"react-filtered-multiselect": "^0.5.1",
"react-google-charts": "^3.0.15",
"react-iframe": "^1.8.0",
"react-json-view": "^1.19.1",
"react-memoize": "^1.0.1",
"react-minimal-pie-chart": "^8.0.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-select-virtualized": "^3.0.0",
"react-spinners": "^0.8.0",
"react-transition-group": "^2.5.3",
"react-window": "^1.8.5",
"style-loader": "^0.23.0",
"styled-components": "^4.2.0",
"styled-jsx": "^3.2.4",
"ts-loader": "^6.0.4",
"typescript": "^3.5.3",
"webpack-dev-server": "^3.3.1",
"yup": "^0.27.0"
,
"devDependencies":
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"@fortawesome/fontawesome-free": "^5.3.1",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^2.0.1",
"copy-webpack-plugin": "^5.0.3",
"file-loader": "^2.0.0",
"formsy-react": "^1.1.5",
"mini-css-extract-plugin": "^0.6.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"react-hot-loader": "^4.8.4",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
"webpack-merge": "^4.2.1"
添加了 webpack.config.js 以帮助解决上述问题:
const webpack = require('webpack')
const path = require('path');
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebPackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = env =>
console.log('env.REACT_APP_USERNAME = ' + env.REACT_APP_USERNAME)
return
mode: "development",
entry: './src/main/js/app.js',
output:
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
,
resolve:
extensions: ['.js', '.jsx', '.ts', '.tsx']
,
module:
rules: [
loader: 'babel-loader',
test: [/\.jsx?$/, /\.tsx?$/],
exclude: [/node_modules/],
options:
presets: ['@babel/env', '@babel/react'],
plugins: ['transform-class-properties']
,
test: /\.css$/,
use: ["style-loader", MiniCssExtractPlugin.loader, "css-loader"]
,
test: /\.html$/,
use: [
loader: "html-loader",
options: minimize: true
]
,
test: /\.(eot|woff|woff2|ttf|svg|gif|png)$/,
use: [
loader: "file-loader"
]
]
,
devServer:
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
,
plugins: [
new webpack.DefinePlugin(
'process.env.REACT_APP_ROUTER_BASE': JSON.stringify(env.REACT_APP_ROUTER_BASE || ''),
'process.env.REACT_APP_USERNAME': JSON.stringify(env.REACT_APP_USERNAME || '')
),
new MiniCssExtractPlugin(
filename: "[name].css",
chunkFilename: "[id].css"
),
new HtmlWebPackPlugin(
template: "./src/main/resources/static/index.html",
filename: "index.html"
),
new CopyWebpackPlugin([
from: 'src/main/resources/static/images', to: 'images'
]),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin()
]
;
【问题讨论】:
尝试重新启动您的系统。我看到该错误与系统页面文件和休眠缓存有关。或者将 webpack 配置的 baseUrl 编辑为“./”而不是“/”。请让我们知道它是否适合您。 @Peter 你能告诉我你想让我在package.json
中更新哪一行,至于将webpack 配置的baseUrl 从/
更新为./
吗?谢谢!
重启无效。
您的项目中是否有webpack.config.js
文件可用?
@Peter 是的,我在帖子中添加了它。你能看一下,让我知道我应该尝试更新什么吗?我在那里找不到与 baseUrl 相关的任何内容。谢谢!
【参考方案1】:
mb npm clean-install
会有所帮助
【讨论】:
你能列出步骤吗?就像删除 node_modules 文件夹后是否需要发生这种情况?【参考方案2】:我通过比较他们 sandbox example 所需的依赖关系来解决问题。
我的package.json
没有以下依赖项:
反应选择
反应虚拟化
所以先安装了上面的。下面显示了我使用的确切版本。
"react-select": "3.1.0",
"react-virtualized": "9.21.2"
然后安装了特定版本2.5.7(他们在沙盒中使用的确切版本here)。尽管他们在doc 中提到了For using this package with react-select 3.x, please use version 2.5.11.
,但我还是决定坚持使用他们在沙箱中使用的 2.5.7。
因此我添加了以下版本:
"react-select-virtualized": "2.5.7",
我的代码编译没有任何问题。
【讨论】:
以上是关于即使在删除 node_modules 和 npm install 后安装新包时也无法修复编译错误的主要内容,如果未能解决你的问题,请参考以下文章
删除 pacakge.json 和 node_modules 后 npm install 失败
删除 node_modules 后如何解决 npm install 问题
npm 与 yarn 安装指定版本包删除依赖;快速删除 node_modules 文件