即使在删除 node_modules 和 npm install 后安装新包时也无法修复编译错误

如何解决即使在删除 node_modules 和 npm install 后安装新包时也无法修复编译错误

我像下面提到的那样安装了 react-select-virtualized here

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 "try{require('./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":"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":"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":"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:\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,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()
        ]
    }
};

解决方法

mb npm clean-install 会有所帮助

我通过比较 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 后安装新包时也无法修复编译错误

如何解决即使在删除 node_modules 和 npm install 后安装新包时也无法修复编译错误

解决方法

相关推荐