I installed react-select-virtualized as mentioned here like the following
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
When I started my application like this:
yarn run local , it didn't compile and displayed following error:
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'
So I deleted the node_modules folder and then did npm install as mentioned in this post:
It compiled successfully. However, when I included it in my code like the following:
import { Select as SecondSelect } from 'react-select-virtualized';
It is again throwing same error:
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'
How to fix this?
This is my 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"
}
}
Added webpack.config.js to help in troubleshooting above issue:
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()
]
}
};
