"Npm Start" Is Not Working - npm

I'm in the middle of making a website, and I use the command npm start to put it up on localhost. However, all of a sudden it stopped working after I had created two workspaces on Visual Studio Code Editor. It only gives me an error.
This is what the error looks like:
npm ERR! path C:\Users\audre\first-blog\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\audre\first-blog\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\audre\AppData\Roaming\npm-cache_logs\2018-05-29T07_42_13_915Z-debug.log
I have no idea what that means. Can anyone help me? Thanks!
Edit:
My package.json file contains the following:
{
"name": "pug-starter",
"version": "1.0.0",
"description": "Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.",
"main": "index.js",
"scripts": {
"dev": "gulp dev",
"start": "gulp dev",
"prod": "gulp build --production",
"deploy": "gulp build --production && gulp deploy && gulp clean:ghpages",
"test": "echo \"Error: no test specified\" && exit 1"
},
"//": "CUSTOM CONFIGURATION",
"config": {
"directory": {
"development": "tmp",
"production": "build",
"ghpages": ".publish",
"source": "src",
"data": "_data",
"component": "_component",
"layout": "_layout",
"asset": "_asset",
"image": "image",
"font": "font",
"templateCollection": [
"article",
"product"
]
},
"render": {
"sourceFileChange": false,
"url": {
"//": "this is recommended to avoid Linux/Windows capitalization issue",
"htmlExtensionOn": false,
"toLowercase": true
}
},
"entry": {
"cssExternal": "style**.{scss,sass}",
"cssInline": "inline**.{scss,sass}",
"css": {
"inline": false,
"external": true
}
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/marianzburlea/pug-starter.git"
},
"keywords": [
"pug",
"starter",
"jade",
"starter"
],
"author": "Marian Zburlea",
"license": "MIT",
"bugs": {
"url": "https://github.com/marianzburlea/pug-starter/issues"
},
"homepage": "https://github.com/marianzburlea/pug-starter#readme",
"devDependencies": {
"autoprefixer": "^6.7.5",
"babel-core": "^6.26.0",
"babel-eslint": "^8.1.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-env": "^1.6.1",
"browser-sync": "^2.18.8",
"eslint": "^3.16.1",
"foldero": "^0.1.1",
"gulp": "github:gulpjs/gulp#4.0",
"gulp-cached": "^1.1.1",
"gulp-changed": "^2.0.0",
"gulp-changed-in-place": "^2.2.0",
"gulp-debug": "^3.1.0",
"gulp-gh-pages": "^0.5.4",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^3.1.1",
"gulp-inline-source": "^3.0.0",
"gulp-load-plugins": "^1.5.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^6.3.0",
"gulp-pug": "^3.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.4.1",
"imagemin-jpegoptim": "^5.0.0",
"imagemin-pngquant": "^5.0.0",
"imagemin-svgo": "^5.2.0",
"jstransformer-markdown-it": "^2.0.0",
"merge-stream": "^1.0.1",
"minimist": "^1.2.0"
}
}

When all else fails, remove/reinstall node.js completely. When you get wild errors all over the board on all of your node env commands, it means node is corrupted or wrong in some way.

Use a process manager that will take care of environment.
few options are
forever(https://www.npmjs.com/package/forever)
with this, you start the website on localhost using forever start <mainfilename>
PM2 (https://www.npmjs.com/package/pm2)
with this, you start the website on localhost using pm2 start <mainfilename>
With process managers, you are abstracted from the environment specifications until you need to have something more specific.

ENOENT means, where you are running npm start command that directory does not contain package.json file.
First, make sure you are in the correct directory and it has package.json file.
Also, if there is no package.json file, you can initialize it using npm init command.
If this is not the case, feel free to drop comments to correct me.

If you have multiple versions of nodejs on your machine and are running node version manager (nvm), be sure to set your version correctly in terminal.
ex.
nvm use v9.5.0

Related

gitlab npm publish not working: This command requires you to be logged in

I am new to this gitlab world.
I have one private project. I am able to publish the package using command prompt.
My .npmrc file
#ui-practice:registry=https://gitlab.MyCompany.com/api/v4/packages/npm/
//gitlab.MyCompany.com/api/v4/packages/npm/:_authToken=PrivateToken
//gitlab.MyCompany.com/api/v4/projects/MyProjectID/packages/npm/:_authToken=PrivateToken
But I am unable to publish using Gitlab CICD, it giving below error
npm ERR! need auth This command requires you to be logged in to https://gitlab.MyCompany.com/api/v4/projects/MyProjectID/packages/npm/
npm ERR! need auth You need to authorize this machine using `npm adduser`
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Windows\system32\config\systemprofile\AppData\Local\npm-cache\_logs\2022
my .gitlab-ci.yml
image: node:latest
stages:
- deploy
deploy:
stage: deploy
script:
- echo "#MyScope:registry=https://${CI_SERVER_HOST}/api/v4/packages/npm/">.npmrc
- echo "//${CI_SERVER_HOST}/api/v4/packages/npm/:_authToken=${CI_JOB_TOKEN}">>.npmrc
- echo "//${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}">>.npmrc
- echo "Created the following .npmrc:"; cat .npmrc
- npm publish
CI_JOB_TOKEN - I have created deploy token and added in gitlab variables
My package.json
{
"name": "#MyScope/MyPackageName",
"version": "1.0.23",
"description": "My Library.",
"publishConfig": {
"#MyScope:registry": "https://gitlab.MyCompany.com/api/v4/projects/MyProjectID/packages/npm/"
},
"scripts": {
"test": "web-test-runner \"./stories/**/*.test.js\" --node-resolve",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"chromatic": "npx chromatic --project-token=78290d9f7c4f",
"build": "rimraf build && rollup -c",
"prepublishOnly": "npm install && npm run build",
"pack:dev": "npm pack && move *.tgz node_modules_offline/"
},
"repository": {
"type": "git",
"url": "https://gitlab.MyCompany.com/MyScope/MyPackageName.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#applitools/eyes-storybook": "^3.27.6",
"#babel/core": "^7.17.7",
"#babel/plugin-proposal-class-properties": "^7.16.7",
"#babel/plugin-proposal-decorators": "^7.17.2",
"#babel/plugin-proposal-export-default-from": "^7.16.7",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
"#babel/plugin-proposal-object-rest-spread": "^7.17.3",
"#babel/plugin-proposal-optional-chaining": "^7.16.7",
"#babel/plugin-proposal-private-methods": "^7.16.11",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-arrow-functions": "^7.16.7",
"#babel/plugin-transform-block-scoping": "^7.16.7",
"#babel/plugin-transform-classes": "^7.16.7",
"#babel/plugin-transform-destructuring": "^7.17.7",
"#babel/plugin-transform-for-of": "^7.16.7",
"#babel/plugin-transform-parameters": "^7.16.7",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/plugin-transform-shorthand-properties": "^7.16.7",
"#babel/plugin-transform-spread": "^7.16.7",
"#babel/preset-env": "^7.16.11",
"#babel/preset-typescript": "^7.16.7",
"#rollup/plugin-babel": "^5.3.1",
"#rollup/plugin-commonjs": "^21.1.0",
"#rollup/plugin-node-resolve": "^13.2.1",
"#rollup/plugin-strip": "^2.1.0",
"#rollup/plugin-typescript": "^8.3.2",
"#storybook/addon-a11y": "^6.4.19",
"#storybook/addon-actions": "^6.4.19",
"#storybook/addon-essentials": "^6.4.19",
"#storybook/addon-links": "^6.4.19",
"#storybook/addons": "^6.4.19",
"#storybook/preset-scss": "^1.0.3",
"#storybook/theming": "^6.4.19",
"#storybook/web-components": "^6.4.19",
"babel-loader": "^8.2.3",
"babel-plugin-macros": "^3.1.0",
"babel-plugin-polyfill-corejs3": "^0.5.2",
"chromatic": "^6.5.4",
"core-js": "^3.21.1",
"css-loader": "^5.2.7",
"eslint": "^8.11.0",
"html-minifier-terser": "^7.0.0-alpha.2",
"rimraf": "^3.0.2",
"rollup": "^2.70.2",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-dts": "^4.2.1",
"rollup-plugin-minify-html-literals": "^1.2.6",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-scss": "^3.0.0",
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.49.9",
"sass-loader": "^10.2.1",
"storybook-dark-mode": "^1.0.9",
"style-loader": "^2.0.0"
},
"dependencies": {
"#esm-bundle/chai": "^4.3.4-fix.0",
"i18next": "^21.6.14",
"lit-html": "^2.2.0",
"node-sass": "^6.0.1"
},
"main": "build/cjs/index",
"module": "build/esm/index",
"files": [
"build"
]
}
what is missing? any idea why gitlab asked me login again?
need auth This command requires you to be logged in to
It's able to build the artifacts only issue in publishing the package using CICD, from visual studio terminal it's working fine.
i had the same problem and the reason it doesn't work for both of us is related to the registry endpoint we were using.
Both of us are using instance level endpoint, that can't be used to publish anything.
This is your .npmrc which contains, like mine, a instance level registry
#MyScope:registry=https://gitlab.MyCompany.com/api/v4/packages/npm/
//gitlab.MyCompany.com/api/v4/packages/npm/:_authToken=PrivateToken
//gitlab.MyCompany.com/api/v4/projects/1233/packages/npm/:_authToken=PrivateToken
This is your extract from .gitlab-ci.yml
script:
- echo "#MyScope:registry=https://${CI_SERVER_HOST}/api/v4/packages/npm/">.npmrc
- echo "//${CI_SERVER_HOST}/api/v4/packages/npm/:_authToken=${CI_JOB_TOKEN}">>.npmrc
- echo "//${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}">>.npmrc
- echo "Created the following .npmrc:"; cat .npmrc
- npm publish
My solution was change the first echo to:
- echo "#MyScope:registry=https://${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/">.npmrc
This switched from instance level package to project level package where you can actually publish your package.
I had the same issue and I could fix it with the right url in package.json. Hope this helps.
"publishConfig": {
"#company:registry": "https://gitlab.com/api/v4/projects/project_id/packages/npm/"
},
Compare the output of echo "Created the following .npmrc:"; cat .npmrc to your local .npmrc file. Are there any discrepancies? Is it possible that one or more of the environment variables within CI are blank?
Thank you for your response, Both are same
My local .npmrc file
#MyScope:registry=https://gitlab.MyCompany.com/api/v4/packages/npm/
//gitlab.MyCompany.com/api/v4/packages/npm/:_authToken=PrivateToken
//gitlab.MyCompany.com/api/v4/projects/1233/packages/npm/:_authToken=PrivateToken
And out put from .yml file i.e. cat .npmrc
Created the following .npmrc:
#MyScope:registry=https://gitlab.MyCompany.com/api/v4/packages/npm/
//gitlab.MyCompany.com/api/v4/packages/npm/:_authToken=PrivateToken
//gitlab.MyCompany.com/api/v4/projects/1233/packages/npm/:_authToken=PrivateToken

Multiple vulnerabilities in new CRA app , but the suggested "npm fix" is questionable

I ran npx create-react-app project-a for my project and right away i found 27 vulnerabilities (16 moderate, 9 high, 2 critical) in my console.
As new developer this looks very scary, so i ran npm audit fix and noticed that many of them are related to Regular Expression stuff in browserslist , the npm audit fix didnt do anything, i still have 27 vulnerabilities.
After a bit of googling i found this closed github issue where the solution is apparently to move react-scripts to devDependencies ( that didnt remove the warnings ).
These warnings are false positives. There are no actual vulnerabilities affecting your app here.
To remove npm audit warnings, move react-scripts from dependencies to devDependencies in your package.json.
I found another github issue and someone said to add this to my package.json to change the version of the sub-dependency because react-dev-utils package uses a vulnerable version (7.0.9) of immer as a dependency ( it didnt fix it ).
"resolutions": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
}
At the very end of the audit it was suggested to run npm audit fix --force and that it includes breaking changes ! very-scary.
The breaking changes were this pretty much :
PS G:\Workspaces\React\project-a> npm audit fix --force
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating react-scripts to 0.9.5,which is a SemVer major change.
Big jump right there from version 4.0.3 down to 0.9.5 and of course it resulted in 43 vulnerabilities , and it suggested running npm audit fix --force yet again to go back to 4.0.3, so i did :
npm WARN audit Updating react-scripts to 4.0.3,which is a SemVer major change.
It's an infinite loop , going back and fourth between react-scripts 0.9.5 and 4.0.3 .
My Node version is : 16.13.1
My NPM version is : 8.1.2
I dont have CRA installed globally.
My Package.json :
{
"name": "project-a",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/css": "^11.5.0",
"#emotion/react": "^11.7.0",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.2.1",
"#mui/material": "^5.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"styled-components": "^5.3.3"
},
"devDependencies": {
"react-scripts": "^4.0.3"
},
"resolutions": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
You can use npm >8.3.0 with the overrides feature.
Just add to package.json:
...
"overrides": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
},
...

Different svelte variable value for npm run dev and npm run build

I'm developing a svelte+tailwind+PHP site with rollup.js. How can I set a variable in the svelte source files depending on if I'm running npm run dev or npm run build? I'd like the different builds to connect to different back-end servers.
This is my package.json in case that's relevant. I'm new to most of these tools, so please bear with me and correct me if I've misunderstood too much. After running npm run build, I run a script that scp's the build folder to the production server.
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"dev": "run-p autobuild watch:tailwind",
"build": "npm run build:tailwind && rollup -c",
"start": "sirv public --single --host",
"start:dev": "sirv public --single --dev",
"autobuild": "rollup -c -w"
},
"devDependencies": {
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"autoprefixer": "^10.0.4",
"d3-interpolate": "^2.0.1",
"npm-run-all": "^4.1.5",
"postcss": "^8.1.10",
"postcss-cli": "^8.3.0",
"postcss-nested": "^5.0.1",
"postcss-reporter": "^7.0.2",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"svelte-dnd-action": "^0.6.22",
"svelte-loading-spinners": "^0.1.1",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
}
You can use #rollup/plugin-replace:
A Rollup plugin which replaces strings in files while bundling.
plugins: [
replace({
// alternatively, one could pass process.env.NODE_ENV or 'development` to stringify
'process.env.NODE_ENV': JSON.stringify('production')
})
]

'gatsby build' failing in Travis CI - error #98123 WEBPACK

I'm trying to deploy my portfolio website using AWS S3, CloudFront, CodePipeline, and Travis CI.
Everything works fine, but Travis CI build keeps failing.
gatsby build gives me an error with:
error #98123 WEBPACK
Generating JavaScript bundles failed
This question is very similar to mine, but the solution was irrelevant to mine because I don't have yarn file and I tried reinstalling my npm dependencies.
Here is the copy of my logs:
Generating JavaScript bundles failed
Can't resolve '../components/Layout' in '/home/travis/build/stomg7969/react-portfolio/src/pages'
File: src/pages/index.js
See our docs page for more info on this error: https://gatsby.dev/issue-how-to
error #98123 WEBPACK
Generating JavaScript bundles failed
Can't resolve '../components/Layout' in '/home/travis/build/stomg7969/react-portfolio/src/pages'
File: src/pages/404.js
See our docs page for more info on this error: https://gatsby.dev/issue-how-to
The command "gatsby clean && gatsby build" exited with 1.
store build cache
Done. Your build exited with 1.
And here is my package.json.
"name": "gatsby-starter-spectral",
"version": "0.0.1",
"description": "Gatsby.js V2 starter template based on Spectral by HTML5 UP",
"repository": {
"type": "git",
"url": "git+https://github.com/anubhavsrivastava/gatsby-starter-spectral.git"
},
"author": {
"name": "Anubhav Srivastava",
"email": "anubhav.srivastava00#gmail.com"
},
"dependencies": {
"gatsby": "^2.13.39",
"gatsby-plugin-manifest": "^2.2.3",
"gatsby-plugin-offline": "^2.1.0",
"gatsby-plugin-react-helmet": "^3.0.12",
"gatsby-plugin-sass": "^2.0.11",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.1",
"react-images": "1.0.0",
"react-scrollspy": "^3.4.0",
"smoothscroll-polyfill": "^0.4.4"
},
"scripts": {
"develop": "gatsby develop",
"build": "npm run clean && gatsby build",
"deploy": "npm run clean && gatsby build --prefix-paths && gh-pages -d public",
"serve": "gatsby serve",
"clean": "rimraf .cache public",
"format": "prettier --write '**/*.js'",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"gh-pages": "^2.0.1",
"prettier": "^1.17.0",
"rimraf": "^2.6.3"
},
"keywords": [
"gatsby",
"gatsby-starter",
"gatsby-starter-spectral"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/anubhavsrivastava/gatsby-starter-spectral/issues"
},
"homepage": "https://github.com/anubhavsrivastava/gatsby-starter-spectral#readme"
}
Lastly, this is my .travis.yml file.
language: node_js
node_js:
- 11.8.0
install: npm install
script: gatsby clean && gatsby build
deploy:
provider: s3
access_key_id: $AWS_KEY
secret_access_key: $AWS_SECRET
bucket: 'thedevelopark.com'
skip_cleanup: true
acl: public_read
local_dir: public
Thank you in advance for your feedback.
I've had the same problem and tried and checked case-sensitivity a thousand times. Wouldn't do anything.
Then I changed the name of the component in all areas, filename, import, export, you name it. Now it works.
I don't know if Netlify had a problem with my component's name "Socials"? Guess I'll never find out.

How to add Webpack 3.8.1 to a Vue project

say I've go this scaffolding : https://github.com/vuejs/vue-cli
I want to add Webpack 3.8.1 to it.
there's already a "build" folder with lots of webpack files in it :
but (one of) the issue(s) is running "webpack" in the project's root returns :
https://webpack.js.org/concepts/ this si the doc I'm supposed to go by.
there's no real example.
it's got :
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
which I adapted to the best of my ability to :
const path = require('path');
module.exports = {
entry: './src/entry.js',
output: {
path: path.resolve(entry, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
I also added a entry.js file containing nothing under src :
and I edited my package.json file to include:
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"node-sass": "^4.5.3",
"sass-loader": "^3.2.3",
"style-loader": "^0.19.0",
"extract-text-webpack-plugin": "^3.0.1"
},
"devDependencies": {
"sinon": "^4.0.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.3",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
and ran :
npm install
npm update
I feel I'm getting somewhat close but I still cannot manage to use the new webpack.
I put my comment as answer to be able to close this question and (hopefuly) help others future users.
I think that your problem is to try to use webpack, you should use the npm run script like: npm run dev or npm run prod, and then the vue+webpack will do the work for you, placing the files where the config says (webpack.base.dev.conf for instance).
If you take a look at package.json, you could see this part:
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
Every one can be executed with npm run X.
Hope it helps!