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.
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/