繁体   English   中英

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

[英]Unable to fix compilation error while installing new package even after deleting node_modules and npm install

我安装了 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 "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":"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文件夹,然后按照本文所述进行了npm 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()
        ]
    }
};

mb npm clean-install将有所帮助

我通过比较他们的沙箱示例所需的依赖关系来解决问题。

我的package.json没有以下依赖项:

  1. 反应选择

  2. 反应虚拟化

所以先安装上面的。 下面显示了我使用的确切版本。

"react-select": "3.1.0",
"react-virtualized": "9.21.2"

然后安装了具体的 2.5.7 版本(这里是他们在沙箱中使用的确切版本)。 虽然,他们在文档中提到For using this package with react-select 3.x, please use version 2.5.11. ,我决定坚持使用他们在沙盒中使用的 2.5.7。 因此,我添加了以下版本:

"react-select-virtualized": "2.5.7",

我的代码编译没有任何问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM