productioncoder / youtube-react Goto Github PK

The home page works fine but the videos wont load and the animation goes on forever how to solve this

Thank you

When i setup the package i get below error "npm install"

C:\Users\Desktop\tubeclone\youtube-react-master>npm install
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN deprecated [email protected]: Please update to ini >=1.3.6 to avoid a prototype pollution issue
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see request/request#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]: 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]: 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]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (debug-js/debug#797)
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (debug-js/debug#797)
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (debug-js/debug#797)
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]: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated [email protected]: please switch to a stable version
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]: request has been deprecated, see request/request#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 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]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
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! code 1
npm ERR! path C:\Users\Desktop\tubeclone\youtube-react-master\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\Desktop\tubeclone\youtube-react-master\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 'C:\Program Files\nodejs\node.exe',
npm ERR! gyp verb cli 'C:\Users\Desktop\tubeclone\youtube-react-master\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\VARISH\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at C:\Users\Desktop\tubeclone\youtube-react-master\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\VARISH\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at C:\Users\Desktop\tubeclone\youtube-react-master\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 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 C:\Users\AppData\Local\Programs\Python\Python310\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Users\AppData\Local\Programs\Python\Python310\python.EXE -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: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:397:12)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1064:16)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\Desktop\tubeclone\youtube-react-master\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\Desktop\tubeclone\youtube-react-master\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.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! C:\Users\AppData\Local\npm-cache_logs\2022-03-14T14_21_55_454Z-debug-0.log

When i hit "npm start" i get below error

node:internal/modules/cjs/loader:936
throw err;
^

Error: Cannot find module 'C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\react-scripts\bin\react-scripts.js'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

i use the youtube api as given in readme

Hello i am relatively new to react. After viewing the code i struggle to understand how the videos property is filled in the video grid. Could you please point me to correct direction? How can i make the api call return certain videos only from certain channels. Also can i load private videos on my channel on youtube? Thanks in advance.

Hi, I'm a Redux maintainer.

I saw a link to your project today, and it looks pretty neat.

We have a new Redux Starter Kit package can simplify a lot of common Redux usage patterns, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state automatically without writing any action creators or action types by hand.

I'm hoping to add a "Usage Guide" docs page in the near future, and I've actually been looking for a moderately complex app that I can use as a basis for demonstrating the ways that Redux Starter Kit can simplify things. Youtube-React looks like the reducer logic and store setup fit that "medium complexity" level I'm looking for, although the use of sagas is not something I care about right now.

So, two thoughts:

• First, wanted to let you know that I might be using some of the code as a starting point for some of the examples / tutorials I hope to write in the near future.
• Second, I would love to have you convert some of Youtube-React's actual code to use Redux Starter Kit and show how to use it in your videos!

If you've got any questions or anything I can help with, please ping me @acemarke on Twitter and Reactiflux, or tag me here on Github.

Here is my repo: https://github.com/ernestdolog/i-tube

It is alll fine except that HeaderNav.scss doesn't get loaded into HeaderNav.js. It doesn't throw any errors, just simply doesn't get loaded in the page.
What I tried until now: delete package-lock, node_modules, rebuild in any possible permutations.

Following the instructions in the readme as-is produced an error when trying to launch the app in any browser.

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at validateString (internal/validators.js:125:11)
    at Object.join (path.js:427:7)
    at noopServiceWorkerMiddleware (C:\Users\Liam\Desktop\youtube-react-master\node_modules\react-dev-utils\noopServiceWorkerMiddleware.js:14:26)
    at Layer.handle [as handle_request] (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:275:10)
    at launchEditorMiddleware (C:\Users\Liam\Desktop\youtube-react-master\node_modules\react-dev-utils\errorOverlayMiddleware.js:20:7)
    at Layer.handle [as handle_request] (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:275:10)
    at handleWebpackInternalMiddleware (C:\Users\Liam\Desktop\youtube-react-master\node_modules\react-dev-utils\evalSourceMapMiddleware.js:42:7)
    at Layer.handle [as handle_request] (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\layer.js:95:5)

Bumping react-scripts from 3.3.0 to 3.4.0 solved the problem, per https://stackoverflow.com/questions/58199001/typeerror-err-invalid-arg-type-the-path-argument-must-be-of-type-string-re