NPM ERR! Missing: bootstrap-duallistbox#github:istvan-ujjmeszaros/bootstrap-duallistbox - reactjs

When I run npm install to install packages I got this error :
npm ERR! code ELOCKVERIFY
npm ERR! Errors were found in your package-lock.json, run npm install to fix them.
npm ERR! Missing: bootstrap-duallistbox#github:istvan-ujjmeszaros/bootstrap-duallistbox
npm ERR! A complete log of this run can be found in:
npm ERR! /home/--/.npm/_logs/2018-09-25T10_34_06_085Z-debug.log
And this is my package.json file :
{
"name": "smartadmin-reactjs",
"version": "1.2.4",
"description": "Smartadmin ReactJs template",
"main": "index.js",
"scripts": {
"build": "./node_modules/.bin/webpack --config webpack.config.js --progress --colors --env production",
"build-dev": "./node_modules/.bin/webpack --config webpack.config.js --progress --colors --env development",
"dev": "./node_modules/.bin/webpack-dev-server --config webpack.config.js --progress --env development"
},
"repository": {
"type": "git",
"url": "git+https://smartadmin-reactjs#bitbucket.org/smartadmin-dev/smartadmin-reactjs.git"
},
"keywords": [],
"author": "griga",
"license": "ISC",
"homepage": "https://bitbucket.org/smartadmin-dev/smartadmin-reactjs#readme",
"dependencies": {
"X-editable": "github:vitalets/x-editable",
"bootstrap": "3.3.7",
"bootstrap-colorpicker": "2.5.1",
"bootstrap-duallistbox": "github:istvan-ujjmeszaros/bootstrap-duallistbox",
"bootstrap-markdown": "2.10.0",
"bootstrap-progressbar": "0.9.0",
"bootstrap-slider": "9.8.0",
"bootstrap-tagsinput": "0.7.1",
"bootstrap-timepicker": "0.5.2",
"bootstrap4-duallistbox": "github:istvan-ujjmeszaros/bootstrap-duallistbox",
"chart.js": "2.6.0",
"classnames": "2.2.5",
"clockpicker": "0.0.7",
"clone": "2.1.1",
"core-js": "2.4.1",
"debounce": "1.0.2",
"dropzone": "5.0.1",
"dygraphs": "1.1.1",
"fuelux": "3.16.0",
"he": "1.1.1",
"highcharts": "5.0.12",
"ion-rangeslider": "2.1.7",
"jquery": "2.2.4",
"jquery-color": "1.0.0",
"jquery-jcrop": "0.9.13",
"jquery-knob": "1.2.11",
"jquery-ui": "1.12.1",
"jquery-ui-npm": "1.12.0",
"jquery-validation": "1.16.0",
"jquery.maskedinput": "1.4.1",
"lodash": "4.17.4",
"markdown": "0.5.0",
"morris.js": "0.5.0",
"nouislider": "10.0.0",
"prop-types": "15.5.10",
"raphael": "2.2.7",
"react": "15.5.4",
"react-bootstrap": "0.31.0",
"react-dom": "15.5.4",
"react-google-maps": "5.1.1",
"react-hot-loader": "3.0.0-beta.6",
"react-redux": "5.0.5",
"react-router": "3.0.5",
"react-router-redux": "4.0.8",
"react-tap-event-plugin": "2.0.1",
"redux": "3.6.0",
"redux-thunk": "2.2.0",
"reflux": "6.4.1",
"scriptjs": "2.5.8",
"select2": "4.0.3",
"smartadmin-plugins": "1.0.20",
"summernote": "0.8.4",
"then-request": "2.2.0",
"to-markdown": "3.0.4"
},
"devDependencies": {
"babel-core": "6.25.0",
"babel-loader": "7.0.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-2": "6.24.1",
"clean-webpack-plugin": "0.1.16",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.28.4",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"html-webpack-plugin": "2.28.0",
"imports-loader": "0.7.1",
"json-loader": "0.5.4",
"redux-devtools": "3.4.0",
"redux-devtools-dock-monitor": "1.1.2",
"redux-devtools-log-monitor": "1.3.0",
"redux-logger": "3.0.6",
"script-loader": "0.7.0",
"style-loader": "0.18.2",
"url-loader": "0.5.9",
"webpack": "2.6.1",
"webpack-dev-server": "2.4.5"
}
}
I have tried to install bootstrap-duallistbox individually with npm or bower but nothing worked out well.
I'm trying to launch the react version of smartAdmin.

I try the bower install and npm install for you.
bower install --save bootstrap-duallistbox
Here is the result.
bower bootstrap-duallistbox#* cached https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox.git#4.0.1
bower bootstrap-duallistbox#* validate 4.0.1 against https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox.git#*
with npm: I add this in package.json and it works out.
"devDependencies": {
"bootstrap-duallistbox": "^3.0.6"
}

Related

Getting error "pngquant pre-build test failed" on installing react package.json

after clone the react project when i did npm install i am facing this problem
i have try to install pngquent pngquent-bin and also libpng-dev but throwing same error again and again when try to install
result:
npm WARN deprecated xlsx#0.10.9: this version is no longer supported. More info at https://cdn.sheetjs.com/xlsx/
npm WARN deprecated core-js#3.20.2: core-js#<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path D:\infi\lmsfe\node_modules\pngquant-bin
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node lib/install.js
npm ERR! ‼ connect ETIMEDOUT 49.44.79.236:443
npm ERR! ‼ pngquant pre-build test failed
npm ERR! i compiling from source
npm ERR! √ pngquant pre-build test passed successfully
npm ERR! × Error: pngquant failed to build, make sure that libpng-dev is installed
npm ERR! at D:\infi\lmsfe\node_modules\pngquant-bin\node_modules\bin-build\node_modules\execa\index.js:231:11
npm ERR! at runMicrotasks (<anonymous>)
npm ERR! at processTicksAndRejections (node:internal/process/task_queues:96:5)
npm ERR! at async Promise.all (index 0)
and this is package.json file
{
"name": "lms",
"version": "8.0.35",
"private": true,
"homepage": "",
"dependencies": {
"#ckeditor/ckeditor5-react": "^5.0.2",
"#emotion/styled": "^11.10.4",
"#formatjs/intl-pluralrules": "^4.0.28",
"#formatjs/intl-relativetimeformat": "^9.1.7",
"#fortawesome/fontawesome-free": "^5.15.3",
"#manaflair/redux-batch": "^1.0.0",
"#mui/x-date-pickers": "^5.0.4",
"#popperjs/core": "~2.10.1",
"#reduxjs/toolkit": "^1.6.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/bootstrap": "^5.0.16",
"#types/draft-js": "^0.11.9",
"#types/draftjs-to-html": "^0.8.1",
"#types/html-to-draftjs": "^1.4.0",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-draft-wysiwyg": "^1.13.4",
"animate.css": "^4.1.1",
"apexcharts": "^3.27.1",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.19.0",
"bootstrap": "^5.0.2",
"bootstrap-icons": "^1.5.0",
"buffer": "^6.0.3",
"chart.js": "^3.3.2",
"clsx": "^1.2.1",
"dayjs": "^1.11.5",
"del": "^6.0.0",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"formik": "^2.2.9",
"html-to-draftjs": "^1.5.0",
"html2canvas": "^1.4.1",
"jspdf": "^2.5.1",
"line-awesome": "^1.3.0",
"lint-staged": "^11.0.0",
"mini-css-extract-plugin": "1.6.2",
"moment": "^2.29.3",
"nouislider": "^15.2.0",
"object-path": "^0.11.5",
"path": "^0.12.7",
"pngquant-bin": "^4.0.0",
"prettier": "^2.3.2",
"prism-react-renderer": "^1.2.1",
"prism-themes": "^1.7.0",
"prismjs": "^1.27.0",
"react": "^17.0.2",
"react-apexcharts": "^1.3.9",
"react-bootstrap-v5": "^1.4.0",
"react-copy-to-clipboard": "^5.0.3",
"react-csv": "^2.2.2",
"react-datepicker": "^4.8.0",
"react-datetime-picker": "^4.0.1",
"react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.15.0",
"react-drag-drop-files": "^2.3.8",
"react-file-viewer-multi": "^1.3.3",
"react-idle-timer": "^5.4.1",
"react-inlinesvg": "^2.3.0",
"react-intl": "^5.20.4",
"react-is": "^17.0.2",
"react-js-pagination": "^3.0.3",
"react-loading-skeleton": "^3.1.0",
"react-player": "^2.11.0",
"react-quill": "1.3.5",
"react-reactstrap-pagination": "^2.0.3",
"react-redux": "7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-select": "^5.7.0",
"react-select-2": "^2.0.11",
"react-star-ratings": "^2.3.0",
"react-tag-autocomplete": "^6.3.0",
"react-time-picker": "^4.5.0",
"react-toastify": "^8.2.0",
"reactstrap": "^9.0.2",
"redux": "4.1.0",
"redux-persist": "6.0.0",
"redux-saga": "1.1.3",
"rtlcss-webpack-plugin": "^4.0.6",
"sass": "1.32.1",
"socicon": "^3.0.5",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1",
"yup": "^0.32.9"
},
"scripts": {
"postinstall": "npm install pngquant-bin#4.0.0",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "prettier --check .",
"format": "prettier --write .",
"rtl": "webpack --config webpack-rtl.config.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/chart.js": "2.9.32",
"#types/nouislider": "15.0.0",
"#types/object-path": "0.11.0",
"#types/prismjs": "1.16.5",
"#types/react-copy-to-clipboard": "5.0.0",
"#types/react-csv": "^1.1.2",
"#types/react-datepicker": "^4.4.2",
"#types/react-js-pagination": "^3.0.4",
"#types/react-redux": "7.1.16",
"#types/react-router-dom": "5.1.7",
"#types/react-star-ratings": "^2.3.0",
"#types/react-tag-autocomplete": "^6.1.1",
"#types/react-time-picker": "^4.0.2",
"v": "^0.3.0",
"webpack-cli": "^4.8.0"
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": "eslint --fix"
},
"eslintIgnore": [
"dist/*"
]
}
try to install pngquant but throwing same error and i also try to install libpng-dev but its showing no such package

error code ELIFECYCLE while running npm run build

I have built react app based on fuse react theme it is running fine in the dev environment by npm start
but I'm getting error while making production build, running npm run build to make a production build but getting ELIFECYCLE error, I have tried all the options like.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fuse-react-app#6.1.4 build: `cross-env
GENERATE_SOURCEMAP=false craco build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fuse-react-app#6.1.4 build script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.
Remove package-lock.json
Delete node_modules
Ran npm install
Ran npm start and app is working fine I can access the app on the browser
Ran npm run build getting ELIFECYCLE error
Here is my package.json file
{
"name": "fuse-react-app",
"version": "6.1.4",
"private": true,
"dependencies": {
"#date-io/core": "1.3.13",
"#date-io/date-fns": "1.3.13",
"#date-io/moment": "1.3.13",
"#fullcalendar/core": "5.7.0",
"#fullcalendar/daygrid": "5.7.0",
"#fullcalendar/interaction": "5.7.0",
"#fullcalendar/react": "5.7.0",
"#fullcalendar/timegrid": "5.7.0",
"#hookform/resolvers": "2.5.1",
"#material-ui/core": "4.11.4",
"#material-ui/data-grid": "latest",
"#material-ui/icons": "4.11.2",
"#material-ui/lab": "4.0.0-alpha.58",
"#material-ui/pickers": "3.3.10",
"#mui/material": "^5.2.4",
"#mui/x-data-grid-pro": "^4.0.0",
"#reduxjs/toolkit": "1.5.1",
"apexcharts": "3.26.3",
"auth0-lock": "11.30.0",
"autosuggest-highlight": "3.1.1",
"axios": "0.21.1",
"axios-mock-adapter": "1.19.0",
"chart.js": "2.9.4",
"clsx": "1.1.1",
"cross-fetch": "3.1.4",
"date-fns": "2.21.3",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"firebase": "8.6.2",
"formsy-react": "2.2.5",
"framer-motion": "4.1.17",
"google-map-react": "2.1.9",
"history": "4.10.1",
"i18next": "20.3.0",
"jsonwebtoken": "8.5.1",
"jss": "10.6.0",
"jss-plugin-extend": "10.6.0",
"jss-rtl": "0.3.0",
"jwt-decode": "2.2.0",
"keycode": "2.2.0",
"lodash": "4.17.21",
"marked": "0.8.2",
"material-table": "^1.69.3",
"material-ui-dropzone": "^3.5.0",
"material-ui-popup-state": "1.8.3",
"millify": "^4.0.0",
"mobile-detect": "1.4.5",
"moment": "^2.29.1",
"notistack": "1.0.9",
"path-to-regexp": "3.2.0",
"perfect-scrollbar": "1.5.1",
"prismjs": "1.23.0",
"prop-types": "15.7.2",
"qs": "6.10.1",
"raw-loader": "4.0.2",
"react": "17.0.2",
"react-apexcharts": "1.3.9",
"react-autosuggest": "10.1.0",
"react-beautiful-dnd": "13.1.0",
"react-chartjs-2": "2.11.2",
"react-compound-timer": "^1.2.0",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "1.14.7",
"react-draggable": "4.4.3",
"react-frame-component": "4.1.3",
"react-hook-form": "7.7.1",
"react-i18next": "11.9.0",
"react-iframe": "^1.8.0",
"react-json-editor-ajrm": "^2.5.13",
"react-json-view": "^1.21.3",
"react-masonry-css": "1.0.16",
"react-number-format": "4.5.5",
"react-popper": "1.3.11",
"react-redux": "7.2.4",
"react-router": "5.2.0",
"react-router-config": "5.1.1",
"react-router-dom": "5.2.0",
"react-scripts": "^4.0.3",
"react-select": "3.2.0",
"react-show-more-text": "^1.5.0",
"react-sparklines": "^1.7.0",
"react-spring": "9.1.2",
"react-swipeable": "6.1.2",
"react-swipeable-views": "0.13.9",
"react-swipeable-views-utils": "0.13.9",
"react-table": "7.7.0",
"react-terminal-component": "^1.5.0",
"react-text-mask": "5.4.3",
"react-virtualized": "9.22.3",
"react-window": "1.8.6",
"redux": "4.1.0",
"redux-logger": "4.0.0",
"styled-components": "5.3.0",
"typeface-poppins": "1.1.13",
"velocity-animate": "1.5.2",
"velocity-react": "1.4.3",
"web-vitals": "^0.2.4",
"yup": "0.32.9"
},
"peerDependencies": {
"autoprefixer": "9.8.6",
"postcss": "7.0.35",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"resolutions": {
"react": "17.0.2",
"react-dom": "17.0.2",
"babel-loader": "8.1.0"
},
"devDependencies": {
"#babel/core": "7.12.17",
"#babel/node": "7.12.17",
"#babel/plugin-transform-react-jsx": "7.12.17",
"#babel/preset-env": "7.12.17",
"#craco/craco": "^6.1.2",
"#tailwindcss/postcss7-compat": "2.1.2",
"#typescript-eslint/eslint-plugin": "^4.25.0",
"#typescript-eslint/parser": "^4.25.0",
"#yarnpkg/pnpify": "2.4.0",
"autoprefixer": "9.8.6",
"babel-eslint": "10.1.0",
"cross-env": "7.0.3",
"eslint": "7.27.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-import-resolver-node": "^0.3.4",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"js-beautify": "1.13.13",
"postcss": "7.0.35",
"prettier": "^2.3.0",
"promise": "8.1.0",
"source-map-explorer": "2.5.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#2.1.2",
"tailwindcss-dir": "4.0.0"
},
"scripts": {
"start": "craco start",
"build": "cross-env GENERATE_SOURCEMAP=false craco build",
"test": "craco test --env=node",
"eject": "craco eject",
"build-docs": "find ./src/app/main/documentation/material-ui-components \\( -name '*.ts' -o -name '*.tsx' \\) -type f -delete && babel-node --presets #babel/preset-env src/app/main/documentation/material-ui-components/build.js",
"analyze": "craco build && source-map-explorer 'build/static/js/*.js' --html analyze-result.html",
"pnpify-sdk": "yarn pnpify --sdk",
"lint": "eslint"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 3 safari version"
]
}}
Node version = 14.2.0
npm version = 6.14.4
Any solution how can I resolve the above error and make a production build.
I think the main reason is the using cross-env package. Otherwise other scripts would cause same error, too.
FOr testing purpose, remove cross-env GENERATE_SOURCEMAP=false and pass false manually instead of process.env.GENERATE_SOURCEMAP. so your build script should be
"build": "craco build",
if it does not work, clean the cache
npm cache clean –force
delete .npm
rm -rf ~/.npm
then delete lock.json and node_modules, and reinstall
npm install

eslint not working in my react and webpack app - npm run lint:fix issue

I am trying to run npm run lint:fix in my react/webpack app.
The command runs and I get ✖ 828 problems (828 errors, 0 warnings)
but then it doesnt fix any of the errors and I get an error message. Im not sure what the error message means, do I need some sort of plugin for eslint to work in webpack? I dont know webpack that well.
✖ 828 problems (828 errors, 0 warnings)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-with-webpack#1.0.0 lint:fix: `eslint --fix .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-with-webpack#1.0.0 lint:fix script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
package.json
{
"name": "react-with-webpack",
"version": "1.0.0",
"description": "",
"proxy": "http://127.0.0.1:4000",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production",
"start": "node serve.js",
"lint": "eslint .",
"lint:fix": "eslint --fix ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-transform-runtime": "^7.12.10",
"#babel/polyfill": "^7.11.5",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"babel-plugin-transform-runtime": "^6.23.0",
"copy-webpack-plugin": "^8.0.0",
"css-loader": "^5.0.1",
"dotenv-webpack": "^7.0.2",
"eslint": "^7.21.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.1",
"http-proxy-middleware": "^1.0.6",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"#babel/runtime": "^7.12.5",
"axios": "^0.21.0",
"babel-plugin-styled-components": "^1.12.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"formik": "^2.2.6",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-datepicker": "^3.3.0",
"react-dom": "^16.13.1",
"react-icons": "^4.1.0",
"react-loader-spinner": "^3.1.14",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"styled-components": "^5.2.1",
"yup": "^0.32.8"
}
}

Laravel Mix: "npm run prod" fails but "npm run watch " works fine- React

I have a laravel 8 app and i'm running react on it. I have successfully built my application but now I need to compile my app for production, but it keeps failing whenever I run npm run prod. And I believe it has something to do with my react redux. It can't seem to handle that type of file configuration whenever I try to compile for production. Meanwhile npm run watch still works perfectly fine.
Here's the error:
C:\xampp\htdocs\pro-oms>npm run prod
> enlite_prime#1.4.3 prod C:\xampp\htdocs\pro-oms
> npm run production
> enlite_prime#1.4.3 production C:\xampp\htdocs\pro-oms
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
ERROR Failed to compile with 1 errors 17:32:19
error in ./resources/js/components/app.js
Module parse failed: Unexpected token (41:4)
You may need an appropriate loader to handle this file type.
| const render = messages => {
| ReactDOM.render(
> <Provider store={store}>
| <LanguageProvider messages={messages}>
| <ConnectedRouter history={history}>
# ./resources/js/app.js 15:0-30
# multi ./resources/js/app.js ./resources/sass/app.scss
3 assets
ERROR in ./resources/js/components/app.js 41:4
Module parse failed: Unexpected token (41:4)
You may need an appropriate loader to handle this file type.
| const render = messages => {
| ReactDOM.render(
> <Provider store={store}>
| <LanguageProvider messages={messages}>
| <ConnectedRouter history={history}>
# ./resources/js/app.js 15:0-30
# multi ./resources/js/app.js ./resources/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! enlite_prime#1.4.3 production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the enlite_prime#1.4.3 production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\KALU KECHUKWU EA\AppData\Roaming\npm-cache\_logs\2020-12-21T16_32_26_115Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! enlite_prime#1.4.3 prod: `npm run production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the enlite_prime#1.4.3 prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\username\AppData\Roaming\npm-cache\_logs\2020-12-21T16_32_26_214Z-debug.log
Here's my package.json:
{
"name": "enlite_prime",
"version": "1.4.3",
"description": "React.js fullstack web template for expert and experienced fullstack developer",
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"browserslist": [
"last 2 versions",
"> 1%",
"IE 10"
],
"lint-staged": {
"*.js": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.json": [
"prettier --write",
"git add --force"
]
},
"pre-commit": "lint:staged",
"resolutions": {
"babel-core": "7.0.0-bridge.0"
},
"dllPlugin": {
"path": "node_modules/react-boilerplate-dlls",
"exclude": [
"#types/googlemaps",
"#types/markerclustererplus",
"autosuggest-highlight",
"chalk",
"compression",
"convert-source-map",
"cross-env",
"dotenv",
"etag",
"express",
"fs",
"ip",
"jsdom",
"minimist",
"mocha",
"moment",
"sanitize.css",
"serve-favicon",
"slick-carousel",
"tunnel-agent"
],
"include": [
"core-js",
"lodash",
"eventsource-polyfill"
]
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-export-default-from": "^7.2.0",
"#babel/plugin-proposal-object-rest-spread": "^7.2.0",
"#babel/polyfill": "7.4.3",
"#date-io/date-fns": "^1.3.11",
"#date-io/moment": "1.3.8",
"#material-ui/core": "^4.7.0",
"#material-ui/icons": "^4.5.1",
"#material-ui/lab": "^4.0.0-alpha.33",
"#material-ui/pickers": "^3.2.8",
"#types/googlemaps": "^3.38.1",
"#types/markerclustererplus": "^2.1.33",
"acorn": "^6.1.1",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.19.0",
"bourbon": "^5.1.0",
"bourbon-neat": "^3.0.0",
"chalk": "^2.4.1",
"classnames": "^2.2.6",
"compression": "1.7.4",
"connected-react-router": "6.6.1",
"cross-env": "5.2.0",
"date-fns": "2.1.0",
"detect-browser": "^3.0.0",
"dotenv": "^6.0.0",
"downshift": "^1.31.12",
"draft-js": "^0.10.5",
"draft-js-inline-toolbar-plugin": "^3.0.0",
"draft-js-plugins-editor": "^2.1.1",
"draftjs-to-html": "^0.8.3",
"draftjs-to-markdown": "^0.5.1",
"express": "4.16.4",
"firebase": "^7.24.0",
"fontfaceobserver": "2.0.13",
"fs": "0.0.1-security",
"history": "4.7.2",
"hoist-non-react-statics": "3.0.1",
"immutable": "3.8.2",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"jsdom": "^13.0.0",
"jss": "^10.0.0",
"jss-rtl": "^0.3.0",
"keycode": "^2.2.0",
"lodash": "^4.17.15",
"lru-memoize": "^1.0.2",
"marked": "^1.2.7",
"minimist": "1.2.0",
"mocha": "^6.1.4",
"moment": "^2.22.2",
"mui-datatables": "^2.13.1",
"prop-types": "15.7.2",
"rcolor": "^1.0.1",
"react": "16.8.6",
"react-anchor-link-smooth-scroll": "^1.0.11",
"react-autosuggest": "^9.3.4",
"react-calendar": "^2.17.4",
"react-clock": "^2.3.0",
"react-countup": "^3.0.3",
"react-dom": "16.8.6",
"react-draft-wysiwyg": "^1.12.13",
"react-dropzone": "^10.2.1",
"react-event-listener": "^0.6.1",
"react-google-maps": "^9.4.5",
"react-helmet": "6.0.0-beta",
"react-intl": "2.8.0",
"react-ionicons": "^2.1.6",
"react-jss": "^10.0.0",
"react-loadable": "5.5.0",
"react-loading-bar": "0.0.7",
"react-markdown": "^3.1.5",
"react-modal": "^3.4.4",
"react-number-format": "^3.3.4",
"react-popper": "^0.10.4",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.1",
"react-scrollspy": "^3.3.5",
"react-select": "^3.0.4",
"react-slick": "^0.23.1",
"react-spring": "^8.0.27",
"react-swipeable-views": "^0.12.13",
"react-syntax-highlighter": "^7.0.0",
"react-text-mask": "^5.3.2",
"recharts": "^1.4.2",
"recompose": "^0.28.2",
"redux": "4.0.1",
"redux-form": "8.2.0",
"redux-immutable": "4.0.0",
"redux-saga": "1.0.2",
"redux-saga-firebase": "^0.15.0",
"reselect": "4.0.0",
"sanitize.css": "8.0.0",
"serve-favicon": "^2.4.5",
"sinon": "^7.3.2",
"slick-carousel": "^1.8.1",
"tunnel-agent": "^0.6.0",
"warning": "4.0.2"
},
"devDependencies": {
"#babel/cli": "7.4.3",
"#babel/core": "7.4.3",
"#babel/plugin-proposal-class-properties": "7.4.0",
"#babel/plugin-syntax-dynamic-import": "7.2.0",
"#babel/plugin-transform-modules-commonjs": "7.4.3",
"#babel/plugin-transform-react-constant-elements": "7.2.0",
"#babel/plugin-transform-react-inline-elements": "7.2.0",
"#babel/preset-env": "7.4.3",
"#babel/preset-react": "7.0.0",
"#babel/register": "7.4.0",
"add-asset-html-webpack-plugin": "3.1.1",
"axios": "^0.19",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-transform": "3.0.0",
"babel-plugin-styled-components": "^1.10.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"bootstrap": "^4.0.0",
"chai": "^4.2.0",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "2.0.0",
"coveralls": "3.0.2",
"cross-env": "^7.0",
"css-loader": "3.4.2",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "3.3.4",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "4.1.0",
"eslint-import-resolver-webpack": "0.11.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "2.17.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "3.0.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-redux-saga": "1.0.0",
"eventsource-polyfill": "0.9.6",
"exports-loader": "0.7.0",
"file-loader": "3.0.1",
"happypack": "^5.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"imports-loader": "0.8.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lint-staged": "8.1.5",
"lodash": "^4.17.19",
"ngrok": "3.1.1",
"node-plop": "0.18.0",
"node-sass": "^4.14.1",
"null-loader": "0.1.1",
"offline-plugin": "5.0.6",
"optimize-css-assets-webpack-plugin": "^5.0.0",
"plop": "2.3.0",
"popper.js": "^1.12",
"postcss-loader": "3.0.0",
"pre-commit": "1.2.2",
"prettier": "1.17.0",
"prismjs": "^1.11.0",
"raw-loader": "2.0.0",
"react-app-polyfill": "0.2.2",
"react-test-renderer": "16.8.6",
"resolve-url-loader": "^3.1.0",
"rimraf": "2.6.3",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"sass-material-colors": "0.0.5",
"shelljs": "^0.8.3",
"style-loader": "0.23.1",
"stylelint": "10.0.1",
"stylelint-config-recommended": "2.2.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.6.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.2.3",
"url-loader": "1.1.2",
"webpack": "4.30.0",
"webpack-cli": "3.3.0",
"webpack-dev-middleware": "3.6.2",
"webpack-hot-middleware": "2.24.3 ",
"webpack-pwa-manifest": "4.0.0",
"whatwg-fetch": "3.0.0"
}
}
Here's my webpack.mix.js:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
output: {
publicPath: '/pro-oms/public/'
}
})
.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
I was able to fix my problem by replacing my .babelrc file with a babel.config.js file.
module.exports = {
presets: [
[
'#babel/preset-env',
{
modules: false,
},
],
'#babel/preset-react',
],
plugins: [
'styled-components',
'#babel/plugin-proposal-class-properties',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-proposal-export-default-from'
]
};

npm install of sparkLines causing error

I was trying to install sparklines for a tutorial i'm doing from online. When I try to install it using npm I get the below error.
Anyone know how to solve this. I tried updating my react to 15.3.0 but that causes a bunch of errors to happen.
npm WARN EPEERINVALID react-addons-shallow-compare#15.3.0 requires a peer of react#^15.3.0 but none was installed.
Here is my package Json
{
"name": "redux-simple-starter",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel support",
"main": "index.js",
"repository": "git#github.com:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.13.1",
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"react-router": "^2.0.1",
"react-sparklines": "^1.6.0",
"redux": "^3.0.4",
"redux-promise": "^0.5.3"
}
}

Resources