ashutosh1919 / react-awesome-loaders Goto Github PK

🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.

Home Page: https://awesome-loaders.netlify.app

License: MIT License

JavaScript 100.00%

awesome-loaders react-awesome-loaders react react-components loaders spinners loader spinner react-loaders react-loader

react-awesome-loaders's Introduction

React Awesome Loaders

🚀 High quality, super responsive and
completely customisable Loading Animations.

Loved the project? Please consider donating to help it improve!

See the official launch of the project and demo on my YouTube Channel.

If you want to discuss about something, then you can ask on my Discord Server.

⭐ Star us on GitHub — it helps!
To view a documentation website, click here

Getting Started 🎬

The easiest way to use one of the loaders from Awesome Loaders is to install the NPM package and import the particular loader to use it.

Install NPM Package

npm install react-awesome-loaders

Import And Use

import { LoaderName } from "react-awesome-loaders"
...
function LoadingComponent(props) {
    return (
        ...
        <LoaderName {...passParametersToCustomise} />
        ...
    );
}
export default LoadingComponent

The loaders are very flexible to import and use wherever you want and in any web framework that uses NPM.
The loaders are auto-responsive. i.e. The size of loader automatically adjusts itself on smaller screen sizes.
Ofcourse, you can set different sizes for different screens by passing props desktopSize and mobileSize.
Read the complete in detail documentation on the project website.

License 📄

This project is licensed under the MIT License - see the LICENSE.md file for details. You can use this project for personal as well as commercial purposes. But if you think you have modified the project and built something really good, we will humbly request you to raise the pull request and share with the opensource community.

Contributing 💡

We have provided detailed description on how & what to contribute to this project on website. Please, take a look.

If you can help us with these. Please don't hesitate to open an pull request or issue. If you want to know about how to create pull request, then please refer to this youtube playlist.

Donate 💉

I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, this takes time. You can use this project for personal and commercial purpose for free.

However, if you are using this project and happy with it or just want to encourage me to continue creating stuff, there are few ways you can do it :-

Giving proper credit when you use this on your project, linking back to it :D
Starring, giving shoutouts and sharing the project 🚀
You can make one-time donations by clicking the buttons below. I'll probably buy an amazing workstation which will help me build more aggressively.

You can look at the Appreciate page on website to know more about how you can help the project.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Ashutosh Hathidara}
💻 📖 🎨 🤔 🚧

_{Satyam Pandey}
💻

_Julius
📖

This project follows the all-contributors specification. Contributions of any kind welcome!

References 👏🏻

We have used many of the amazing resources to create this project and it is difficult to display all those resources here on github repository.

That is why we have displayed almost all used dependencies on our website.

Also, I have also mentioned the link and profile url of the original concept creators of the loaders at the bottom of corresponding loader documentation on website.

react-awesome-loaders's People

Contributors

Stargazers

Watchers

react-awesome-loaders's Issues

Book loader not displayed correctly

Book loader is not displayed correctly on landing page.
Happens on Firefox 85.0.2 and Chrome 88.0.4324.182.

Buttons on website are not clickable

The two CTA buttons on the website are not clickable. I wanted to fix this issue but cannot find the code.

npm install is not working

base ❯ npm install react-awesome-loaders
npm WARN deprecated @babel/[email protected]: 👋 We've deprecated any official yearly presets in 6.x in favor or babel-preset-env. For 7.x it would be @babel/preset-env.
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated [email protected]: 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 /Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh /var/folders/ls/v9q_x9m97pq66zyhkdwdh5w40000gn/T/postinstall-6579665a.sh
npm ERR! Building: /usr/local/bin/node /Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli '/usr/local/bin/node',
npm ERR! gyp verb cli '/Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb which failed Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (/Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/which/which.js:13:12)
npm ERR! gyp verb which failed at F (/Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/which/which.js:68:19)
npm ERR! gyp verb which failed at E (/Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/which/which.js:80:29)
npm ERR! gyp verb which failed at /Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/which/which.js:89:16
npm ERR! gyp verb which failed at /Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/isexe/index.js:42:5
npm ERR! gyp verb which failed at /Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:206:21)
npm ERR! gyp verb which failed python2 Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (/Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/which/which.js:13:12)
npm ERR! gyp verb which failed at F (/Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/which/which.js:68:19)
npm ERR! gyp verb which failed at E (/Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/which/which.js:80:29)
npm ERR! gyp verb which failed at /Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/which/which.js:89:16
npm ERR! gyp verb which failed at /Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/isexe/index.js:42:5
npm ERR! gyp verb which failed at /Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:206:21) {
npm ERR! gyp verb which failed code: 'ENOENT'
npm ERR! gyp verb which failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb which succeeded python /Users/nicolaesposito/opt/anaconda3/bin/python
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: /Users/nicolaesposito/opt/anaconda3/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack File "", line 1
npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:400:12)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1093:16)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Darwin 22.2.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /Users/nicolaesposito/Documents/App/GIT/app.frontend.corintis/node_modules/react-awesome-loaders/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.17.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/nicolaesposito/.npm/_logs/2022-12-20T17_16_44_444Z-debug-0.log

wifiloader has some console.log statements in it

wifiloader.js has some console.log statements on lines 214-216. These should probably be removed in production builds.

Layout shift when changing loaders

Huge layout shift when changing loaders on the website, could ruin user experience.

Here is what I meant

MIT license bagde duplicated

There is a duplicate of the MIT license badge in the readme.md

why i want install this package i get this Error !! i thinck some things is wrong in this packeage

npm ERR! code 1
npm ERR! path C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --l
ibsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'C:\Program Files\nodejs\node.exe',
npm ERR! gyp verb cli 'C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\node-gyp\bin\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb which failed Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at C:\Users\isrez\Desktop\New folder\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at C:\Users\isrez\Desktop\New folder\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb which failed python2 Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at C:\Users\isrez\Desktop\New folder\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at C:\Users\isrez\Desktop\New folder\node_modules\isexe\windows.js:36:5
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
npm ERR! gyp ERR! stack at PythonFinder.failNoPython (C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\node-gyp\lib\configure.js:484:19)
npm ERR! gyp ERR! stack at PythonFinder. (C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\node-gyp\lib\configure.js:509:16)
npm ERR! gyp ERR! stack at callback (C:\Users\isrez\Desktop\New folder\node_modules\graceful-fs\polyfills.js:306:20)
npm ERR! gyp ERR! stack at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp ERR! System Windows_NT 10.0.19044
npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass
_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\isrez\Desktop\New folder\node_modules\react-awesome-loaders\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.15.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

Unable to install using npm

I am using node 16.4.0

below are dependencies I am using to my project

"dependencies": {
    "@hapi/joi": "^17.1.1",
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "crypto-js": "^4.1.1",
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.3.4",
    "sib-api-v3-sdk": "^8.3.0"
  }

npm install git+https://github.com/ashutosh1919/react-awesome-loaders.git
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@jest/[email protected]',
npm WARN EBADENGINE   required: { node: '^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.4.0', npm: '8.7.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@jest/[email protected]',
npm WARN EBADENGINE   required: { node: '^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.4.0', npm: '8.7.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@jest/[email protected]',
npm WARN EBADENGINE   required: { node: '^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.4.0', npm: '8.7.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {   
npm WARN EBADENGINE   package: '@jest/[email protected]',
npm WARN EBADENGINE   required: { node: '^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.4.0', npm: '8.7.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {   
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.4.0', npm: '8.7.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {   
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.4.0', npm: '8.7.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {   
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.4.0', npm: '8.7.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {   
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.4.0', npm: '8.7.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {   
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.4.0', npm: '8.7.0' }
npm WARN EBADENGINE }
npm WARN deprecated @babel/preset-es2015@7.0.0-beta.53: 👋 We've deprecated any official yearly presets in 6.x in favor or babel-preset-env. For 7.x it would be @babel/preset-env.
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated  
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'      
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.  
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated [email protected]: core-js@<3.4 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. Please, upgrade your dependencies to the actual version of core-js.

Below is the error log after installation

npm ERR! code 1
npm ERR! git dep preparation failed
npm ERR! command C:\Program Files\nodejs\node.exe C:\Users\ashis\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js install --force --cache=C:\Users\ashis\AppData\Local\npm-cache --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit --include=dev --include=peer --include=optional --no-package-lock-only --no-dry-run
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN While resolving: @babel/[email protected]
npm ERR! npm WARN Found: @babel/[email protected]
npm ERR! npm WARN node_modules/@babel/core 
npm ERR! npm WARN   dev @babel/core@"^7.12.10" from the root project
npm ERR! npm WARN   7 more (@babel/plugin-proposal-class-properties, ...)
npm ERR! npm WARN
npm ERR! npm WARN Could not resolve dependency:
npm ERR! npm WARN peer @babel/core@">=7.0.0-beta.50 <7.0.0-rc.0" from @babel/[email protected]
npm ERR! npm WARN node_modules/@babel/preset-es2015
npm ERR! npm WARN   @babel/preset-es2015@"^7.0.0-beta.53" from the root project       
npm ERR! npm WARN
npm ERR! npm WARN Conflicting peer dependency: @babel/[email protected]
npm ERR! npm WARN node_modules/@babel/core 
npm ERR! npm WARN   peer @babel/core@">=7.0.0-beta.50 <7.0.0-rc.0" from @babel/[email protected]
npm ERR! npm WARN   node_modules/@babel/preset-es2015
npm ERR! npm WARN     @babel/preset-es2015@"^7.0.0-beta.53" from the root project     
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN ERESOLVE overriding peer dependency
npm ERR! npm WARN While resolving: babel-loader@7.1.5
npm ERR! npm WARN Found: babel-core@7.0.0-bridge.0
npm ERR! npm WARN node_modules/babel-core  
npm ERR! npm WARN   dev babel-core@"^7.0.0-bridge.0" from the root project
npm ERR! npm WARN
npm ERR! npm WARN Could not resolve dependency:
npm ERR! npm WARN peer babel-core@"6" from babel-loader@7.1.5
npm ERR! npm WARN node_modules/babel-loader
npm ERR! npm WARN   dev babel-loader@"^7.1.4" from the root project
npm ERR! npm WARN
npm ERR! npm WARN Conflicting peer dependency: babel-core@6.26.3
npm ERR! npm WARN node_modules/babel-core  
npm ERR! npm WARN   peer babel-core@"6" from babel-loader@7.1.5
npm ERR! npm WARN   node_modules/babel-loader
npm ERR! npm WARN     dev babel-loader@"^7.1.4" from the root project
npm ERR! npm WARN deprecated @babel/preset-es2015@7.0.0-beta.53: 👋 We've deprecated any official yearly presets in 6.x in favor or babel-preset-env. For 7.x it would be @babel/preset-env.
npm ERR! npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm ERR! npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm ERR! npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained       
npm ERR! npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm ERR! npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm ERR! npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm ERR! npm WARN deprecated [email protected]: this library is no longer supported 
npm ERR! npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm ERR! npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm ERR! npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm ERR! npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm ERR! npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm ERR! npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm ERR! npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm ERR! npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
npm ERR! npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm ERR! npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm ERR! npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm ERR! npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm ERR! npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm ERR! npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142     
npm ERR! npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm ERR! npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm ERR! npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm ERR! npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm ERR! npm WARN deprecated [email protected]: core-js@<3.4 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. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! npm ERR! code 1
npm ERR! npm ERR! path C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\node-sass
npm ERR! npm ERR! command failed
npm ERR! npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js  
npm ERR! npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=   
npm ERR! npm ERR! gyp info it worked if it ends with ok
npm ERR! npm ERR! gyp verb cli [
npm ERR! npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! npm ERR! gyp verb cli   'C:\\Users\\ashis\\AppData\\Local\\npm-cache\\_cacache\\tmp\\git-cloneTlhs2R\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! npm ERR! gyp verb cli   'rebuild',
npm ERR! npm ERR! gyp verb cli   '--verbose',
npm ERR! npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! npm ERR! gyp verb cli   '--libsass_library='
npm ERR! npm ERR! gyp verb cli ]
npm ERR! npm ERR! gyp info using [email protected]
npm ERR! npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! npm ERR! gyp verb command rebuild []
npm ERR! npm ERR! gyp verb command clean []
npm ERR! npm ERR! gyp verb clean removing "build" directory
npm ERR! npm ERR! gyp verb command configure []
npm ERR! npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\node-gyp\node_modules\which\which.js:13:12)
npm ERR! npm ERR! gyp verb `which` failed     at F (C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\node-gyp\node_modules\which\which.js:68:19)
npm ERR! npm ERR! gyp verb `which` failed     at E (C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\node-gyp\node_modules\which\which.js:80:29)
npm ERR! npm ERR! gyp verb `which` failed     at C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\node-gyp\node_modules\which\which.js:89:16
npm ERR! npm ERR! gyp verb `which` failed     at C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\isexe\index.js:42:5
npm ERR! npm ERR! gyp verb `which` failed     at C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\isexe\windows.js:36:5
npm ERR! npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:195:21)
npm ERR! npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\node-gyp\node_modules\which\which.js:13:12)
npm ERR! npm ERR! gyp verb `which` failed     at F (C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\node-gyp\node_modules\which\which.js:68:19)
npm ERR! npm ERR! gyp verb `which` failed     at E (C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\node-gyp\node_modules\which\which.js:80:29)
npm ERR! npm ERR! gyp verb `which` failed     at C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\node-gyp\node_modules\which\which.js:89:16
npm ERR! npm ERR! gyp verb `which` failed     at C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\isexe\index.js:42:5
npm ERR! npm ERR! gyp verb `which` failed     at C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\isexe\windows.js:36:5
npm ERR! npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:195:21) {
npm ERR! npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! npm ERR! gyp verb `which` failed }
npm ERR! npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! npm ERR! gyp verb `which` succeeded python C:\Users\ashis\AppData\Local\Programs\Python\Python38\python.EXE
npm ERR! npm ERR! gyp ERR! configure error 
npm ERR! npm ERR! gyp ERR! stack Error: Command failed: C:\Users\ashis\AppData\Local\Programs\Python\Python38\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! npm ERR! gyp ERR! stack           
            ^
npm ERR! npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! npm ERR! gyp ERR! stack
npm ERR! npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:12)
npm ERR! npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:394:28)        
npm ERR! npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1067:16)
npm ERR! npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\ashis\\AppData\\Local\\npm-cache\\_cacache\\tmp\\git-cloneTlhs2R\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="        
npm ERR! npm ERR! gyp ERR! cwd C:\Users\ashis\AppData\Local\npm-cache\_cacache\tmp\git-cloneTlhs2R\node_modules\node-sass        
npm ERR! npm ERR! gyp ERR! node -v v16.4.0 
npm ERR! npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! npm ERR! gyp ERR! not ok
npm ERR! npm ERR! Build failed with error code: 1
npm ERR!
npm ERR! npm ERR! A complete log of this run can be found in:
npm ERR! npm ERR!     C:\Users\ashis\AppData\Local\npm-cache\_logs\2022-05-23T14_58_42_158Z-debug-0.log

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ashis\AppData\Local\npm-cache\_logs\2022-05-23T14_56_39_690Z-debug-0.log

Cannot Install on Node v20

Deprecated Warnings and Errors

It crashes when installing and shows deprecated and error warnings

GYP ERR during installation

Whenever I try to install the package, I get the following error:

--libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
gyp verb cli   'C:\\Projects\\project\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Projects\project\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Projects\project\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Projects\project\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Projects\project\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Projects\project\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Projects\project\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
gyp verb `which` failed  python2 Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Projects\project\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Projects\project\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Projects\project\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Projects\project\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Projects\project\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Projects\project\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` succeeded python C:\Python39\python.EXE
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Python39\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                       ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:12)
gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
gyp ERR! System Windows_NT 10.0.19045
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Projects\\project\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Projects\project\node_modules\node-sass
gyp ERR! node -v v16.13.2

I've read the issue is related to not having python 2.7 installed, but wouldn't I be stuck with the same error if I eventually move to production unless I specifically have python 2.7 installed on the server?

Cannot install due to dependency conflicts

npm ERR! make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: make failed with exit code: 2
npm ERR! gyp ERR! stack at ChildProcess.onExit (/workspace/CyberOniLLC-/node_modules/react-awesome-loaders/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:293:12)
npm ERR! gyp ERR! System Linux 5.15.0-47-generic
npm ERR! gyp ERR! command "/home/gitpod/.nvm/versions/node/v16.19.0/bin/node" "/workspace/CyberOniLLC-/node_modules/react-awesome-loaders/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /workspace/CyberOniLLC-/node_modules/react-awesome-loaders/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.19.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR! /home/gitpod/.npm/_logs/2023-03-20T16_31_49_152Z-debug-0.log

Any Support For React Native Framework

Node sass issue preventing installation

Hi,

I'm trying to install react-awesome-loaders for my react app but when i do i get this error:

npm ERR! Failed at the [email protected] postinstall

Any idea what the issue is?

I have already tried to remove pack-lock.json, node_modules and clear npm cache and reinstalling npm packages but I still get the same error.

My node version: 15.6.0
My node-sass version: 6.0.1

Menu bar for docs page for small screens

For small screens to jump to another loader there is no option. We can add menubar or navbar to the main page. Want to work on the same.