I am getting white blank screen when I deploy my react app? - reactjs

The errors are as follows
npm WARN deprecated source-map-resolve#0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated svgo#1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated uuid#3.4.0: 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.
I deployed it in vercel.

Related

how to fix Web compatibility issue

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 #npmcli/move-file#1.1.2: This functionality has been moved to #npmcli/fs
npm WARN deprecated #npmcli/move-file#2.0.0: This functionality has been moved to #npmcli/fs
npm WARN deprecated source-map-resolve#0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated sourcemap-codec#1.4.8: Please use #jridgewell/sourcemap-codec instead
npm WARN deprecated core-js#3.20.3: core-js#<3.23.3 is no longer maintained and not recommended for usage due to the number of
hing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
project is compiled successfully but ui is not working (like continously refreshing)

React: create-react-app creates a "problem-filled" project

Explanation (Please read complete)
I started learning React and I'm an absolute beginner with it, and want to make the practical tutorial in the React page, coding a "tic-tac-toe" application.
But, when creating with:
npx create-react-app tic_tac_toe
Get the following output:
Creating a new React app in /path/to/my/project/tic_tac_toe.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1393 packages in 1m
Initialized a git repository.
Installing template dependencies using npm...
added 72 packages in 9s
Removing template package using npm...
removed 1 package, and audited 1465 packages in 7s
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Created git commit.
Success! Created tic_tac_toe at /path/to/my/project/tic_tac_toe
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd tic_tac_toe
npm start
Happy hacking!
Since it gives me this warning:
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
I run the command as instructed and get this output:
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating react-scripts to 2.1.3, which is a SemVer major change.
npm WARN deprecated source-map-url#0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated flatten#1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated kleur#2.0.2: Please upgrade to kleur#3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated topo#2.0.2: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated eslint-loader#2.1.1: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated hoek#4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated request-promise-native#1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated left-pad#1.3.0: use String.prototype.padStart()
npm WARN deprecated source-map-resolve#0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated circular-json#0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated querystring#0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated acorn-dynamic-import#3.0.0: This is probably built in to whatever tool you're using. If you still need it... idk
npm WARN deprecated html-webpack-plugin#4.0.0-alpha.2: please switch to a stable version
npm WARN deprecated chokidar#2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated uuid#3.4.0: 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 babel-eslint#9.0.0: babel-eslint is now #babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated sane#2.5.2: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated uglify-es#3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated joi#11.4.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated core-js#2.6.4: 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 WARN deprecated core-js#2.6.12: 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.
And an "Audit Report" with tons of logs of packages, where all records follow this structure:
#name of the module and version
#severity
#a link to a "https://github.com/advisories" and a label of a security problem
fix available via `npm audit fix --force`
Will install react-scripts#5.0.1, which is a breaking change
#path of the module with the problem
#dependencies
At the end of the report, this conclusion:
72 vulnerabilities (11 low, 20 moderate, 37 high, 4 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
And, obviously, it's just an infinite loop of "npm audit fix --force" where I can't get any solution.
What I Tried
Since "audit fix" didn't work, in my ignorance, tried updating:
sudo npm update
But alway get this 2 errors:
code ERR_INVALID_ARG_TYPE: Always get it the first time running the update command.
npm ERR! code ERR_INVALID_ARG_TYPE
npm ERR! The "from" argument must be of type string. Received undefined
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-11-14T00_45_19_331Z-debug-0.log
code ENOTEMPTY: Get it with multiple dirs and "can be fixed" by renaming the dir as indicated, but there are many of them that require the same operation, so isn't a solution.
npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /path/to/my/project/tic_tac_toe/node_modules/acorn-globals
npm ERR! dest /path/to/my/project/tic_tac_toe/node_modules/.acorn-globals-WcMVK6xv
npm ERR! errno -39
npm ERR! ENOTEMPTY: directory not empty, rename '/path/to/my/project/tic_tac_toe/node_modules/acorn-globals' -> '/path/to/my/project/tic_tac_toe/node_modules/.acorn-globals-WcMVK6xv'
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-11-14T00_46_31_581Z-debug-0.log
Any help it's welcome, thanks.
Those "High Severity Vulnerabilities" can be completely ignored for your purposes.
Even for the vast majority of commercial projects, you wouldn't waste your time thinking about them.
Carry on as you were from right after you ran npx create-react-app ...!
Reference: https://overreacted.io/npm-audit-broken-by-design/

How to install newest version of react-router-dom

When executing npm i -D react-router-dom, I am alerted to a couple of warnings regarding deprecated packages/dependencies (see the code snippet below). That's why I wanted to install the newest version of react-router-dom, but I don't know the correct command for it. Thanks for your help!
npm i -D react-router-dom
npm WARN deprecated #hapi/topo#3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/bourne#1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/hoek#8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/address#2.1.4: Moved to 'npm install #sideway/address'
npm WARN deprecated sane#4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
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 ERR! Maximum call stack size exceeded
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\WASSIM\AppData\Roaming\npm-cache\_logs\2021-12-08T12_15_23_618Z-debug.log
There are several ways to update your npm dependencies.
Minor version upgrades
Major version upgrades
For minor version upgrades (e.g. from version 1.0.0 to 1.0.5) you can simply run npm install. npm will then run upgrades for all dependencies that are used in the current project path.
In React.js applications, there is a file in your project path named package.json. If you want to do a major version upgrade (e.g. from version 1.0.0 to 2.0.0), you have to open the file and manually change the entry of react-router-dom. package.json has the following structure:
{
"name": "name"
"version": "1.0.0"
...
"dependencies": {
"react-router-dom": "5.3.0"
...
}
}
If you want to upgrade for example from version 5.3.0 to 6.0.0, you would change it to:
{
"name": "name"
"version": "1.0.0"
...
"dependencies": {
"react-router-dom": "6.0.0"
...
}
}
Sometimes sub-dependencies (i.e. other packages that are used in react-router-dom) are deprecated. I would not recommend to update them manually because other dependencies may be dependent on that particular version of a package. If you still want to have a look at it, have a look at this post.

Unable to install React using npm install and dependencies

npm WARN deprecated #hapi/bourne#1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/topo#3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
npm WARN deprecated request-promise-native#1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see request/request#3142
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated left-pad#1.3.0: use String.prototype.padStart()
npm WARN deprecated sane#4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated eslint-loader#3.0.2: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated #hapi/address#2.1.4: Moved to 'npm install #sideway/address'
npm WARN deprecated querystring#0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated babel-eslint#10.0.3: babel-eslint is now #babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated uuid#3.4.0: 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 html-webpack-plugin#4.0.0-beta.5: please switch to a stable version
npm WARN deprecated #hapi/hoek#8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/joi#15.1.1: Switch to 'npm install joi'
npm WARN deprecated core-js#2.6.12: core-js#<3.3 is no longer maintained and not recommended for usage due to the
When installing React using command line showing above errors, what to do?
those are not errors, some warnings you can skip

My React App has unfixable High Severity warnings, how do I fix this?

I cloned my repo for a react app.
Ran npm i
Received 3 high severity warnings.
On attempt to fix (npm audit fix --force) I get 31 vulnerabilities in total
Here are the warnings:
npm WARN deprecated request-promise-native#1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated #hapi/topo#3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/bourne#1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
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 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 deprecated babel-eslint#10.1.0: babel-eslint is now #babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated #hapi/address#2.1.4: Moved to 'npm install #sideway/address'
npm WARN deprecated rollup-plugin-babel#4.4.0: This package has been deprecated and is no longer maintained. Please use #rollup/plugin-babel.
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated #hapi/hoek#8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/joi#15.1.1: Switch to 'npm install joi'
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.
added 1988 packages, and audited 1988 packages in 8s
126 packages are looking for funding
run `npm fund` for details
3 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
This is what the audit shows:
# npm audit report
immer <8.0.1
Severity: high
Prototype Pollution - https://npmjs.com/advisories/1603
fix available via `npm audit fix --force`
Will install react-scripts#2.0.5, which is a breaking change
node_modules/immer
react-dev-utils >=6.0.6-next.9b4009d7
Depends on vulnerable versions of immer
node_modules/react-dev-utils
react-scripts >=2.0.6-next.9b4009d7
Depends on vulnerable versions of react-dev-utils
node_modules/react-scripts
3 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
I fought over this issue for a few hours yesterday and this morning and found this thread which seems to be the cause:
https://github.com/facebook/create-react-app/issues/10411
As well as this proposed fix:
https://github.com/facebook/create-react-app/pull/10412
It looks like it's a dependency issue with immer, react-scripts, and react-dev-tools. They say they will try and push out an update this weekend so I would look forward to that sooner than later.
I think I had the same problem today.
npm update react-dev-utils --depth 2 into the console helped me and resolved following:
High Prototype Pollution
Package immer
Dependency of react-scripts
Path react-scripts > react-dev-utils > immer
More info https://nodesecurity.io/advisories/1603

Resources