Related
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.
I am currently stuck at the Encore/Webpack installation. I followed the steps at symfony.com. But when continuing to the simple example I got stuck at running yarn encore dev. I get the error: "Command "encore" not found". I also have an error when running symfony server:start after installing Encore and navigating to a view:
An exception has been thrown during the rendering of a template ("Could not find the entrypoints file from Webpack: the file "path/entrypoints.json" does not exist.").
As far as I know the entrypoints.json should have been autogenerated. I have Yarn 1.22.10 and NodeJS 14.16.1.
What I have done
I executed the commands composer require symfony/webpack-encore-bundle
and yarn install
I looked at StackOveflow questions 'error Command "encore" not found.' when running 'yarn run encore' in Symfony4, webpack encore dev-server not found /, Error Command "encore" not found. (separate backend webpack), Can't run encore dev
I executed the command composer require webpack
I noticed my package.json doesn't have a scripts object where the command encore dev is supposed to be living. I watched a YouTube video and followed it (https://youtu.be/Fs_4FMoSO90). That's why I know this. I wonder why I don't have it. Below is the package.json from the video. My package.json only has the dev dependency Bootstrap.
Executed npm install
Package.json from video:
{
"devDependencies": {
"#symfony/webpack-encore": "^0.31.0",
"core-js": "^3.0.0",
"regenerator-runtime": "^0.13.2",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}
My package.json:
{
"devDependencies": {
"bootstrap": "^5.0.0"
}
}
I removed the package.json, package-lock.json and executed yarn install again and it installed some packages. I didn't need NPM. I already got Bootstrap from my Yarn.lock (that's the only thing in there). I still have both errors though.
After Yivi's advice I executed composer req webpack, yarn install and yarn encore dev. The difference is that I executed composer require symfony/webpack-encore-bundle which is what is mentioned on the installation page on the symfony website. The yarn encore dev command tries to run webpack now, but I get the following error: Error: Encore.enableStimulusBridge is not a recognized property or method. webpack.config.js:26 Object.<anonymous>
webpack.config.js line 26
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')
Your advice worked msg. I installed the recipes with composer recipes:install symfony/webpack-encore-bundle --force -v and now yarn encore dev compiles webpack successfully. I now also know that I accidentally kept the package.json from the video in my project which explains why my error changed from Command encore not found to Error: Encore.enableStimulusBridge is not a recognized property or method. webpack.config.js:26 Object.<anonymous>
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
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 (:
Recently I started Angular 2 tutorial at https://angular.io/docs/ts/latest/tutorial/.
and left off with Angular 2 beta 8.
Now I resumed the tutorial and latest beta is beta 14.
If I simply do npm update a few modules (preloaded with the tutorial) are updated but not Angular2 (I can see that with npm ls).
If I do npm update angular 2 or npm update angular2#2.0.0beta.14 it just does nothing either.
The command npm update -D && npm update -S will update all packages inside package.json to their latest version, according to their defined version range. You can read more about it here.
If you want to update Angular from a version prior to 2.0.0-rc.1, then you'll need to manually edit package.json, as Angular was split into several npm modules. Without this, as angular2 package points to 2.0.0-beta.21, you'll never get to use the latest version of Angular.
A list with some of the most common modules that you'll need to get started can be found in the quickstart repository.
Notes:
A cool way to stay up to date with your packages' latest version is to use npm outdated which shows you all outdated packages together with their wanted and latest version.
The reason why we need to chain two commands, npm update -D and npm update -S is to overcome this bug until it's fixed.
Another nice package which I used for migrating form a beta version of Angular2 to Angular2 2.0.0 final is npm-check-updates
It shows the latest available version of all packages specified within your package.json. In contrast to npm outdated it is also capable to edit your package.json, enabling you to do a npm upgrade later.
Install
sudo npm install -g npm-check-updates
Usage
ncufor display
ncu -u for re-writing your package.json
Upgrade to latest Angular 5
Angular Dep packages:
npm install #angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}#latest --save
Other packages that are installed by the angular cli
npm install --save core-js#latest rxjs#latest zone.js#latest
Angular Dev packages:
npm install --save-dev #angular/{compiler-cli,cli,language-service}#latest
Types Dev packages:
npm install --save-dev #types/{jasmine,jasminewd2,node}#latest
Other packages that are installed as dev dev by the angular cli:
npm install --save-dev codelyzer#latest jasmine-core#latest jasmine-spec-reporter#latest karma#latest karma-chrome-launcher#latest karma-cli#latest karma-coverage-istanbul-reporter#latest karma-jasmine#latest karma-jasmine-html-reporter#latest protractor#latest ts-node#latest tslint#latest
Install the latest supported version used by the Angular cli (don't do #latest):
npm install --save-dev typescript#2.4.2
Rename file angular-cli.json to .angular-cli.json and update the content:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "project3-example"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
UPDATE:
Starting from CLI v6 you can just run ng update in order to get your dependencies updated automatically to a new version.
With ng update sometimes you might want to add --force flag.
If you do so make sure that the version of typescript you got
installed this way is supported by your current angular version,
otherwise you might need to downgrade the typescript version.
Also checkout this guide Updating your Angular projects
For bash users only
If you are on are on Mac/Linux or running bash on Windows(that wont work in default Windows CMD) you can run that oneliner:
npm install #angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}#4.4.5 --save
yarn add #angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}#4.4.5
Just specify version you wan't e.g #4.4.5 or put #latest to get the latest
Check your package.json just to
make sure you are updating all #angular/* packages that you app is relying on
To see exact #angular version in your project run:
npm ls #angular/compiler or yarn list #angular/compiler
To check the latest stable #angular version available on npm run:
npm show #angular/compiler version
Official npm page suggest a structured method to update angular version for both global and local scenarios.
1.First of all, you need to uninstall the current angular from your
system.
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g #angular/cli
2.Clean up the cache
npm cache clean
EDIT
As pointed out by #candidj
npm cache clean is renamed as npm cache verify from npm 5 onwards
3.Install angular globally
npm install -g #angular/cli#latest
4.Local project setup if you have one
rm -rf node_modules
npm install --save-dev #angular/cli#latest
npm install
Please check the same down on the link below:
https://www.npmjs.com/package/#angular/cli#updating-angular-cli
This will solve the problem.
Alternative approach using npm-upgrade:
npm i -g npm-upgrade
Go to your project folder
npm-upgrade check
It will ask you if you wish to upgrade the package, select Yes
That's simple
If you want to install/upgrade all packages to the latest version and you are running windows you can use this in powershell.exe:
foreach($package in #("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
npm install #angular/$package#latest -E
}
If you also use the cli, you can do this:
foreach($package in #('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli')){
iex "npm install #angular/$package#latest -E $(If($('cli','compiler-cli').Contains($package)){'-D'})";
}
This will save the packages exact (-E), and the cli packages in devDependencies (-D)
Just start here:
https://update.angular.io
Select the version you're using and it will give you a step by step guide.
I recommend choosing 'Advanced' to see all steps. Complexity is a relative concept - and I don't know whose stupid idea this feature was, but if you select 'Basic' it won't show you all steps needed and you may miss something important that your otherwise 'Basic' application is using.
As of version 6 there is a new Angular CLI command ng update which intelligently goes through your dependencies and performs checks to make sure you're updating the right things :-)
The steps will outline how to use it :-)
npm uninstall --save-dev angular-cli
npm install --save-dev #angular/cli#latest
ng update #angular/cli
ng update #angular/core --force
ng update #angular/material or npm i #angular/cdk#6
#angular/material#6 --save
npm install typescript#'>=2.7.0 <2.8.0'
Best way to do is use the extension(pflannery.vscode-versionlens) in vscode.
this checks for all satisfy and checks for best fit.
i had lot of issues with updating and keeping my app functioining unitll i let verbose lense did the check and then i run
npm i
to install newly suggested dependencies.
If you are looking like me for just updating your project to the latest these is what works form me since Angular 6:
Open the console on your project folder: If you type: ng update then you will get the below message:
We analyzed your package.json, there are some packages to update:
Name Version Command to update
--------------------------------------------------------------------------------
#angular/cli 7.0.7 -> 7.2.2 ng update #angular/cli
#angular/core 7.0.4 -> 7.2.1 ng update #angular/core
There might be additional packages that are outdated.
Run "ng update --all" to try to update all at the same time.
So I usually go straight and do:
ng update --all
Finally you can check your new version:
ng version
Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.12.2
#angular-devkit/build-angular 0.12.2
#angular-devkit/build-optimizer 0.12.2
#angular-devkit/build-webpack 0.12.2
#angular-devkit/core 7.2.2
#angular-devkit/schematics 7.2.2
#angular/cli 7.2.2
#ngtools/webpack 7.2.2
#schematics/angular 7.2.2
#schematics/update 0.12.2
rxjs 6.3.3
typescript 3.2.4
webpack 4.28.4