Vercel deployment error | npm ERR! code E404 - next.js

I'm trying to deploy my website on vercel it is a regular static portfolio website connected with a headless cms (graphql). I've previously deployed a website on vercel, had some errors but the errors were understandable and I managed to solve them all. However, when I try to deploy my web now it returns errors I cannot understand. I have googled and spent a few hours trying to fix the problems but it resulted in nothing. I'm really curious what the npm ERR! code E404 is.
Full error messages
Cloning github.com/Dylanyves/mac-yves (Branch: main, Commit: bf98fa3)
Cloning completed: 410.928ms
Installing build runtime...
Build runtime installed: 2.790s
Looking up build cache...
Build Cache not found
Installing dependencies...
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/find-up/-/find-upy-2%20px-4.1.0.tgz - Not found
npm ERR! 404
npm ERR! 404 'find-up#https://registry.npmjs.org/find-up/-/find-upy-2 px-4.1.0.tgz' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /vercel/.npm/_logs/2022-05-17T13_28_43_498Z-debug-0.log
Error: Command "npm install" exited with 1
package.json
{
"name": "next-portfolio",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"aos": "^2.3.4",
"graphql": "^16.5.0",
"graphql-request": "^4.2.0",
"html-react-parser": "^1.4.12",
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0",
"uuid": "^8.3.2"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"eslint": "8.15.0",
"eslint-config-next": "12.1.6",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24"
}
}

You need to specify the Framework Preset in the Vercel's Build and Deployment settings.
Go through this documentation , this should help.

Related

Can't build assets on deploy - Symfony 5/Encore/Ux

I have a Symfony 5 application, i'm using webpack Encore / Ux for the first time.
I'm facing difficulties with deployment, only the HTML is displayed at the URL ; the "build" directory is almost empty, it only contains "entrypoints.json" and "manifest.json". the assets aren't compiled.
When im running npm run build to compile the assets in production i have this message :
sh: encore: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! # build: encore production --progress
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the # build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
The build script in the package.json doesnt work :
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
and i have no idea to where does this come from.
Would someone have something for this ?
i ran npm run build and it doesnt work, but it does in dev mode
Before deploying to production server you need to Compile Assets for Production on your dev server.
Then deploy only the built assets.
The process is documented here:
https://symfony.com/doc/current/frontend/encore/faq.html#how-do-i-deploy-my-encore-assets

npm SCSS not compiling

I have installed NPM correctly and written my main.scss file which I need to compile. My "package.json" file looks like this:
{
"name": "recreated-site",
"version": "1.0.0",
"description": "",
"main": "bootstrap.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile:sass": "node-sass sass/main.scss css/style.css"
},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.4.1",
"sass": "^1.26.2"
},
"devDependencies": {
"node-sass": "^4.13.1"
}
}
Upon running the command "npm run compile:sass" I get this error message:
An output directory must be specified when compiling a directory
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! recreated-site#1.0.0 compile:sass: node-sass sass/main.scss css/style.css
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the recreated-site#1.0.0 compile:sass 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\Dell\AppData\Roaming\npm-cache_logs\2020-03-08T09_13_28_740Z-debug.log
I have no idea what I did wrong as I am new to SASS. Please help!
It seems you're running on Windows, which uses backslashes \ instead of forward slashes /.
Replace your blackslashes by forward slashes in your package.json like this :
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile:sass": "node-sass sass\main.scss css\style.css"
},
BTW, I'm not sure && and exit 1 works on Windows.
I had the same problem, I was using react-js.
After the changes in scss and compiled it again using npm command and it worked for me.
During defining scripts , In my case ,I just deleted The test line and only kept the compile:sass line. Below is my used scripts in JSON file:
"compile:sass":"node-sass sass/main.scss css/style.css -w"
}
After saving it , I open CMD at project location and run the command npm run compile:sass.
Hope this helps

Firebase functions fails to deploy with same error in all functions

I'm trying to deploy my firebase functions but all the functions return me error, I had already deployed before without any error.
I did not install anything new since the last time that a deploy was correct.
Every functions return almost the same error, the only thing that changes is the "errorId"
I have tried to logout from firebase-cli and login again, i have updated firebase-tools, firebase-admin, firebase-functions from npm.
I'm deploying with firebase deploy --only functions
Deployment error.
Build failed:
{
"error": {
"canonicalCode": "INVALID_ARGUMENT",
"errorMessage": "`npm_install` had stderr output:\nnpm WARN tar ENOENT: no such file or directory, open '/workspace/node_modules/.staging/#types/lodash-973f4ada/common/collection.d.ts'\nnpm WARN tar ENOENT: no such file or directory, open '/workspace/node_modules/.staging/#types/node-29231f2f/inspector.d.ts'\nnpm WARN tar ENOENT: no such file or directory, open '/workspace/node_modules/.staging/#types/node-f1c8db24/inspector.d.ts'\nnpm WARN tar ENOENT: no such file or directory, open '/workspace/node_modules/.staging/#firebase/auth-1b85ce5b/dist/auth.esm.js.map'\nnpm WARN tar ENOENT: no such file or directory, open '/workspace/node_modules/.staging/#firebase/webchannel-wrapper-e6854ec7/dist/index.js'\nnpm ERR! code E404\nnpm ERR! 404 Not Found: grpc#1.20.1\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR! /builder/home/.npm/_logs/2019-06-08T18_16_17_266Z-debug.log\n\nerror: `npm_install` returned code: 1",
"errorType": "InternalError",
"errorId": "FD2536C1"
}
}
Package.json :
{
"name": "functions",
"engines": {
"node": "8"
},
"description": "Cloud Functions for Firebase",
"scripts": {
"lint": "eslint .",
"serve": "firebase serve --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"dependencies": {
"#firebase/storage": "^0.2.16",
"#google-cloud/vision": "^0.24.0",
"#sendgrid/mail": "^6.4.0",
"cors": "^2.8.5",
"dateformat": "^3.0.3",
"firebase": "^5.11.1",
"firebase-admin": "^7.4.0",
"firebase-functions": "^2.3.1",
"json2csv": "^4.5.1",
"mailchimp-api-v3": "^1.13.0",
"moment-timezone": "^0.5.25",
"openpay": "^1.0.3",
"paypal-rest-sdk": "^1.8.1",
"request": "^2.88.0"
},
"devDependencies": {
"eslint": "^4.12.0",
"eslint-plugin-promise": "^3.6.0",
"firebase-functions-test": "^0.1.6"
},
"private": true
}
Correct deploy of the functions.
Update***
I have tried to delete everything and uninstall every package except for the ones required for firebase-functions and start over with one test function in node 8 i'm having the same issue, with node 6 it was deployed, but i need to use node 8 because i need to use await/async
I had a similar deployment failure. I think it was caused by me running firebase deploy from the app directory rather the the app\functions directory. In any case, I ran the following commands from the terminal (using VSCode in my case) having changed into the app\functions directory. Deployment then worked perfectly.
npm install --save #google-cloud/storage
npm install --save firebase-admin#latest
npm install --save firebase-functions#latest
firebase deploy
Hope that helps.
Checking the log
You can examine the actual logs by using this command to open the log
firebase functions:log
Doing this is really helpful since specific issue will usually be visible there. I sometimes even had error as simple as a missing package name in package.json
It would have been much helpful if firebase could show better info on the errors directly. but at least we can find them here.
I hope it helps
I had similar issue and it ended up being a missing module in my package.json
You can view more detailed / useful logs here: https://console.cloud.google.com/logs
Firebase functions:log really helps! In my case I had not enabled signin method in the firebase project (:

Cannot find module 'webpack-cli'

I want to make es6 into my project so I used this tutorial this tutorial
and when i try to write 'webpack' in cmd I get the error
Done in 8.99s.
{ Error: Cannot find module 'webpack-cli'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at runCommand.then.result (C:\Users\adirz\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:62:14)
at process._tickCallback (internal/process/next_tick.js:109:7) code: 'MODULE_NOT_FOUND' }
package.json
{
"name": "functions",
"scripts": {
"build": "tsc",
"serve": "npm run build && firebase serve --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"main": "lib/index.js",
"dependencies": {
"firebase-admin": "~5.12.0",
"firebase-functions": "^1.0.1"
},
"devDependencies": {
"ts-loader": "^4.2.0",
"typescript": "^2.5.3",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-node-externals": "^1.7.2"
},
"private": true
}
my folder structure
Try using: npm i -g webpack-cli.
Here is the official issue on github: https://github.com/webpack/webpack-cli/issues/191
Link globally installed package to your project
npm link webpack-cli
This solved the problem for me
sudo chown -R $USER /usr/local/lib/node_modules
npm i -g webpack-cli
https://flaviocopes.com/npm-fix-missing-write-access-error/
The problem for me it was that I was not using 'sudo' permissions.
If you are using linux based system try typing sudo npm i -g webpack-cli
I had a similar error. For me the answer was to ensure that the whole path to my project is free of spaces, ampersands(&) or any other weird characters.
If you are using Yarn instead NPM to run Webpack globally, you can install webpack using the following commands:
yarn global add webpack
and or
yarn global add webpack-cli

Does `mup deploy`require to run `meteor npm install` before (locally)?

I have an app I like to deploy with meteor-up / mup.
In my packages.json I have babel-runtime listed:
{
// .....
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-runtime": "^6.23.0",
"bcrypt": "^1.0.2"
},
"engines": {
"node": "4.8"
}
}
However, when I do mup setup && mup deploy I get this error:
Error: The babel-runtime npm package could not be found in your node_modules
directory. Please run the following command to install it:
meteor npm install --save babel-runtime
at meteorInstall.node_modules.meteor.babel-runtime.babel-runtime.js (packages/babel-runtime.js:36:9)
at fileEvaluate (packages/modules-runtime.js:197:9)
at require (packages/modules-runtime.js:120:16)
at packages/babel-runtime.js:138:15
at packages/babel-runtime.js:149:3
at /built_app/programs/server/boot.js:303:34
at Array.forEach (native)
at Function._.each._.forEach (/built_app/programs/server/node_modules/underscore/underscore.js:79:11)
at /built_app/programs/server/boot.js:128:5
at /built_app/programs/server/boot.js:352:5
=> Starting meteor app on port:80
/built_app/programs/server/boot.js:356
}).run();
^
What I don't understand:
Do I have to run meteor npm install locally before I do mup setup?
Actually, I would expect that mup does this automatically while building and deploying the app.
I'm glad for any help to understand how this works!
You need to run meteor npm install before deploying because MeteorUp needs all npm dependencies to build the bundle on your computer.

Resources