yarn add react: error An unexpected error occurred: - reactjs

yarn add react
yarn add v1.22.19
info No lockfile found.
[1/4] Resolving packages...
error An unexpected error occurred: "https://registry.npmjs.org/react: connect ENETUNREACH 2606:4700::6810:1523:443".
Yarn-error.log
Arguments:
/home/oab/.nvm/versions/node/v18.13.0/bin/node /usr/local/bin/yarn add react
PATH:
/home/oab/.nvm/versions/node/v18.13.0/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
Yarn version:
1.22.19
Node version:
18.13.0
Platform:
linux x64
Trace:
Error: connect ENETUNREACH 2606:4700::6810:1523:443
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1487:16)
npm manifest:
{
"name": "01-configuranAPI",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
yarn manifest:
No manifest
Lockfile:
No lockfile
I have already performed the following commands:
yarn cache clean
and nothing someone has the solution`
and nothing someone has the solution

Related

Storybook will not install: Could not resolve dependency: peer react#"^18.2.0"

I want to initialize Storybook in a root directory which contains several front-end component library implementations
project/
// Storybook should be initialized here...
vue-library/
twig-library/
svelte-library/
When I try to run any of these commands in the project/ directory I get an error.
npm install #storybook/cli
npx storybook init
The error:
npm WARN
Could not resolve dependency:
peer react#"^18.2.0" from the root project
ERESOLVE overriding peer dependency
While resolving: react-dom#18.2.0
Found: peer react#"^18.2.0" from the root project.
I tried initializing storybook from inside the vue-library/ folder as well, and I received the same error.
I also tried to install react as a peer dependency on my own by manually adding the peer dependency to a package.json in the project/ directory:
{
"name": "********-********-*********",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "*********************************"
},
"dependencies": {
"#storybook/cli": "^6.5.9"
},
"peerDependencies": {
"react": "^18.2.0" <-------------- ADDED THIS
},
"author": "**** **",
"license": "ISC"
}
This didn't solve the problem, though.
Any ideas?
You need to manually install react and react-dom as "devDependencies" in the project root directory.
npm install -D react react-dom #storybook/cli
Your concept of "peerDependencies" is likely wrong. A package’s peer dep means, it’s a dep which the package cannot live without, nonetheless, the package is expecting someone else to take care of the installation.
This might sound weird but it helps avoid duplicate dependency installation. Read this article for detail.
I just create an empty test/ folder to test run. It works on my machineTM.
➜ test npm install -D react react-dom #storybook/cli
# ...
added 1026 packages in 41s
➜ test npx storybook init
Need to install the following packages:
storybook
Ok to proceed? (y) y
# ...
✨ Done in 44.47s.
. ✓
• Preparing to install dependencies. ✓
yarn install v1.22.19
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 1.13s.
. ✓
🔎 checking possible migrations..
✅ migration check successfully ran
To run your Storybook, type:
yarn storybook
For more information visit: https://storybook.js.org

ModuleNotFoundError: Module not found: Error: Can't resolve '../config' in '/vercel/path0/components'

I have stumbled upon when deploying my next.js app through vercel. It works completely well in local using command 'npm run dev'. But when I tried to deploy it through vercel with Github remote repository, it throws error like below:
16:13:16.712 Attention: Next.js now collects completely anonymous telemetry regarding usage.
16:13:16.712 This information is used to shape Next.js' roadmap and prioritize features.
16:13:16.712 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
16:13:16.712 https://nextjs.org/telemetry
16:13:20.255 Failed to compile.
16:13:20.256 ModuleNotFoundError: Module not found: Error: Can't resolve '../config' in '/vercel/path0/components'
16:13:20.257 > Build error occurred
16:13:20.257 Error: > Build failed because of webpack errors
16:13:20.257 at /vercel/path0/node_modules/next/dist/build/index.js:15:918
16:13:20.257 at runMicrotasks (<anonymous>)
16:13:20.258 at processTicksAndRejections (internal/process/task_queues.js:93:5)
16:13:20.258 at async /vercel/path0/node_modules/next/dist/build/tracer.js:3:470
16:13:20.269 npm ERR! code ELIFECYCLE
16:13:20.269 npm ERR! errno 1
16:13:20.272 npm ERR! myportfolio#0.1.0 build: `next build`
16:13:20.272 npm ERR! Exit status 1
16:13:20.272 npm ERR!
16:13:20.272 npm ERR! Failed at the myportfolio#0.1.0 build script.
16:13:20.272 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
16:13:20.280 npm ERR! A complete log of this run can be found in:
16:13:20.280 npm ERR! /vercel/.npm/_logs/2021-04-04T15_13_20_272Z-debug.log
Here is my package.json
{
"name": "myportfolio",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"3d-react-carousal": "^3.1.0",
"airtable": "^0.10.1",
"framer-motion": "^4.0.0",
"next": "10.0.7",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-gtm-module": "^2.0.11",
"react-intersection-observer": "^8.31.0",
"react-lottie": "^1.2.3",
"react-scroll": "^1.8.1",
"react-toast-notifications": "^2.4.3"
},
"devDependencies": {
"file-loader": "^6.2.0"
}
}
Here is my next.config.js
module.exports
={
webpack(config, options) {
config.module.rules.push({
test: /\.(mp3)$/,
use: {
loader: 'file-loader',
options: {
publicPath: '/_next/static/sounds/',
outputPath: 'static/sounds/',
name: '[name].[ext]',
esModule: false,
},
},
});
return config;
}
}
Any ideas why it throws a compile error when deploying on Vercel?
the vercel use the Linux that is case sensitive and read "/Components" as different of "/components".
If you changed the file or folder name to lowercase or uppercase, your remote branch may not be updated with the new name.
In this case you can be use the command git mv oldNameFileOrFolder newNameFileOrFolder and commit + push. Or save file or folder in another place, remove it from project and commit. After commit, past it again in project, commit and push.
Might be the Vercel cache. Using vercel --force helped me override the build cache for deployment.
There's a similar post here and Vercel's doc's mention caching based on the framework preset.
In my case import was #components/footer/ which changed to #components/Footer/ worked like a charm on Vercel
I changed the name of my images from image.JPG to image.jpg it worked for the deploy eventhough the error was telling me about my components
In my case, I consult the Nextjs docs and found this: https://vercel.com/guides/how-do-i-resolve-a-module-not-found-error
You need to run this command: git config core.ignorecase false to push your case changes to GitHub.
It is important to remain that Vercel takes the code from GitHub and not directly from your machine, so, the changes are really import in GitHub.

Why is npm start not working in react app?

I tried to run npm start to a React app that it was working perfectly, but now for some reason is not working. The mesage I recive is the following:
Error: Cannot find module 'C:\Users\albat\Desktop\personal_projects\alba_virtual_cv\index.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
at Function.Module._load (internal/modules/cjs/loader.js:686:27)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! alba_virtual_cv#1.0.0 start: `node index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the alba_virtual_cv#1.0.0 start 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\albat\AppData\Roaming\npm-cache\_logs\2020-05-11T09_08_43_976Z-debug.log
And my package.json is the following:
{
"name": "alba_virtual_cv",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"debug": "^4.1.1"
},
"devDependencies": {},
"description": ""
}
Please I need help to run the application again.
Thank you.
Run this before starting the project:
npm -i
This installs missing packages
It just means something went wrong when dependencies were installed the first time.
I suggest doing these three steps:
npm install -g npm#latest to update npm because it is sometimes buggy.
rm -rf node_modules to remove the existing modules.
npm install to re-install the project dependencies.
This should fix the problem.

Module not Found on Heroku Deploy but Found on Local

So I tried to deploy my app to Heroku and find this error Module not found: Error: Can't resolve './components/add-credentials/AddEducation' in '/tmp/build_6b46c3e828c5afc20e70a4b1b2232f69/client/src'
Everything works fine including that module in localhost. What should I change for this to work?
Complete Build Log
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 8.11.x
engines.npm (package.json): 5.6.x
engines.yarn (package.json): 1.9.x
Resolving node version 8.11.x...
Downloading and installing node 8.11.4...
Bootstrapping npm 5.6.x (replacing 5.6.0)...
npm 5.6.x installed
Resolving yarn version 1.9.x...
Downloading and installing yarn (1.9.4)...
Installed yarn 1.9.4
-----> Building dependencies
Installing node modules (yarn.lock)
yarn install v1.9.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents#1.2.4: The platform "linux" is incompatible with this module.
info "fsevents#1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 13.99s.
Running heroku-postbuild (yarn)
yarn run v1.9.4
$ NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
> uglifyjs-webpack-plugin#0.4.6 postinstall /tmp/build_6b46c3e828c5afc20e70a4b1b2232f69/client/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
added 1546 packages in 41.748s
> client#0.1.0 build /tmp/build_6b46c3e828c5afc20e70a4b1b2232f69/client
> react-scripts build
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve './components/add-credentials/AddEducation' in '/tmp/build_6b46c3e828c5afc20e70a4b1b2232f69/client/src'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#0.1.0 build 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! /tmp/npmcache.te6Qt/_logs/2018-09-14T23_46_37_674Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
Package.json
{
"name": "devconnector",
"version": "1.0.0",
"description": "Social network for developers",
"engines": {
"node": "8.11.x",
"npm": "5.6.x",
"yarn": "1.9.x"
},
"main": "server.js",
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"author": "Dian Yuanda",
"license": "MIT",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"concurrently": "^4.0.1",
"create-react-app": "^1.5.2",
"express": "^4.16.3",
"global": "^4.3.2",
"gravatar": "^1.6.0",
"jsonwebtoken": "^8.2.0",
"mongoose": "^5.0.12",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"validator": "^9.4.1"
},
"devDependencies": {
"nodemon": "^1.17.5"
}
}

Can't install #uirouter/angularjs via npm

Trying to install #uirouter/angularjs via npm, but getting the following error:
npm ERR! code E404
npm ERR! 404 Not Found: #uirouter/angularjs#1.0.12
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/anatolyt/.npm/_logs/2018-01-10T14_14_22_375Z-debug.log
I'm using node v8.9.1 and npm 5.6.0, I'm using nvm too. Using OSX High Sierra - latest.
My package.json file is as following:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"#uirouter/angularjs":"1.0.12"
},
"author": "",
"license": "ISC"
}
As I suspected it was related to our private npm repository - sinopia, it was unable to resolve name which begins from #, #uirouter/angularjs, #angular/core, etc...
Thanks for our IT guy, he found a solution in this thread: Unable to resolve dependencies like "#angular/common", you need to issue locally:
npm config set "#angular:registry" http://registry.npmjs.org/
it will cause npm to bypass sinopia and go straight to the npmjs repository for all packages within #angular scope. You have to perform same for every scope.
Another permanent solution (untested yet) is to modify sinopia's code:
in sinopia/lib/up-storage.js
change code on line number 10
var encode = function(thing) {
return encodeURIComponent(thing).replace(/^%40/, '#');
};

Resources