NPM does not install dependencies - npm

There are a handful of other questions on here, but none that seem to be the same problem.
Running npm install on a preexisting package.json, pulled in from git, does all of its processing, creates a node_modules directory, then ends without installing the modules. node_modules is empty, and there were no errors (just a couple warnings about deprecated modules). The entire directory is owned by the active user.
After a bunch of messing around, I've found that if I remove all of the devDependencies, the normal dependencies will install as expected.
OS: Ubuntu 16.04
Node: 6.9.1
NPM: 3.10.8
package.json:
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --ignore src --ignore public --ignore views",
"test": "node ../app.js"
},
"author": "xxx",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.5.1",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"chalk": "^1.1.3",
"event-stream": "^3.3.4",
"fs-extra": "^1.0.0",
"git-guppy": "^1.2.1",
"glob": "^7.1.1",
"gulp": "^3.9.1",
"gulp-cssnano": "^2.1.2",
"gulp-duration": "0.0.0",
"gulp-filter": "^4.0.0",
"gulp-function": "^2.2.0",
"gulp-git": "^1.12.0",
"gulp-livereload": "^3.8.1",
"gulp-notify": "^2.2.0",
"gulp-postcss": "^6.2.0",
"gulp-sourcemaps": "^2.2.0",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"guppy-pre-commit": "^0.4.0",
"postcss-cssnext": "^2.8.0",
"postcss-math": "0.0.5",
"precss": "^1.4.0",
"q": "^1.4.1",
"utils-merge": "^1.0.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
},
"dependencies": {
"axios": "^0.15.2",
"dotenv": "^2.0.0",
"express": "^4.14.0",
"fs": "0.0.1-security",
"git-rev-sync": "^1.8.0",
"pug": "^2.0.0-beta6",
"yamljs": "^0.2.8"
}
}
This is running on a basic DO server, the same distribution I've spun up for a dozen other projects, with no problem. The only thing I can think of is if there's something within one of the devDependencies that is clogging things up. How to debug this?

It appears that "fs" is not a valid npm package. I came to this conclusion after running this command:
npm bugs fs
This ended up displaying bugs filed against a npm/security-holder package. It appears that the "fs" on NPM may have been malicious.
If you want node's fs package, you don't need an entry in your package.json for that, fs is built-in.

Related

Fontawesome giving 401 unauthorized error during build process

I've been using fontawesome with no issues for months. Today, I started seeing this error whenever I tried to push my app to production.
error An unexpected error occurred: "https://npm.fontawesome.com/#fortawesome/fontawesome-pro/-/6.1.1/fontawesome-pro-6.1.1.tgz: Request failed \"401 Unauthorized\"".
I've tried running yarn install, removing node_modules, removing yarn.lock, etc. and I still get 401 unauthorized. I even uninstalled and reinstalled all fontawesome packages.
I'm using Yarn, not NPM, so not sure if that has something to do with it. I do have a .npmrc file set up and that looks like:
// .npmrc
#fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken="my-token"
I also have a .yarnrc.yml file
// .yarnrc.yml
npmScopes:
fortawesome:
npmRegistryServer: "https://npm.fontawesome.com/"
npmAlwaysAuth: true
npmAuthToken: "my-token"
Here's my package.json:
{
"name": "br-client",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"test": "jest",
"storybook": "start-storybook -p 6006 --quiet",
"build-storybook": "build-storybook",
"storybook:clean": "rm -rf node_modules/.cache/storybook",
"json-server": "json-server -p 5000 --host 0.0.0.0 --watch db.json",
"compile": "tsc --noEmit"
},
"dependencies": {
"#auth0/auth0-react": "^1.3.0",
"#fortawesome/fontawesome-common-types": "^6.1.1",
"#fortawesome/fontawesome-pro": "^6.1.1",
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-brands-svg-icons": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#joeattardi/emoji-button": "^4.6.0",
"#stripe/react-stripe-js": "^1.4.1",
"#stripe/stripe-js": "^1.15.2",
"#tailwindcss/forms": "^0.4.0",
"#typeform/embed": "^1.2.0",
"#types/auth0-js": "^9.14.2",
"#types/lodash-es": "^4.17.4",
"#types/react-dom": "^17.0.0",
"#types/react-modal": "^3.12.0",
"algoliasearch": "^4.9.3",
"auth0-js": "^9.19.0",
"axios": "^0.21.1",
"classnames": "^2.2.6",
"date-fns": "^2.16.1",
"firebase": "^8.2.4",
"lodash-es": "^4.17.20",
"next": "10.0.5",
"next-transpile-modules": "^6.0.0",
"qs": "^6.9.6",
"rc-slider": "^9.7.1",
"rc-switch": "^3.2.2",
"react": "17.0.1",
"react-datepicker": "^3.4.1",
"react-dom": "17.0.1",
"react-easy-crop": "^3.3.2",
"react-functional-select": "^2.9.5",
"react-ga": "^3.3.0",
"react-helmet": "^6.1.0",
"react-hotjar": "^5.0.0",
"react-modal": "^3.12.1",
"react-player": "^2.9.0",
"react-query": "^3.5.16",
"react-typeform-embed": "^0.2.1",
"react-window": "^1.8.6",
"recoil": "^0.1.2",
"sharp": "^0.30.3",
"styled-components": "^5.2.1",
"styled-jsx-plugin-postcss": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#next/bundle-analyzer": "^10.0.5",
"#storybook/addon-actions": "^6.1.18",
"#storybook/addon-essentials": "^6.1.18",
"#storybook/addon-links": "^6.1.18",
"#storybook/react": "^6.1.18",
"#tailwindcss/postcss7-compat": "^2.0.3",
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.3",
"#types/node": "^14.14.20",
"#types/react": "^17.0.0",
"#types/react-datepicker": "^3.1.7",
"autoprefixer": "^10.4.4",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"husky": "^5.1.3",
"import-sort-style-module": "^6.0.0",
"jest": "^26.6.3",
"json-server": "^0.16.3",
"lint-staged": ">=10",
"postcss": "^8.4.12",
"prettier": "^2.2.1",
"prettier-plugin-import-sort": "^0.0.6",
"tailwindcss": "^3.0.23",
"tsconfig-paths-webpack-plugin": "^3.3.0",
"typescript": "^4.1.3"
},
"importSort": {
".js, .jsx, .ts, .tsx": {
"style": "module",
"parser": "typescript"
}
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "tsc --noEmit"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx,css,scss,md,json}": "prettier --write"
}
}
Answering my own question. The issue ended up being with my dockerfile. According to the fontawesome installation instructions you need to run these two commands in your terminal:
npm config set "#fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" "your token here"
But, if you use docker you'll need to add these two commands to your dockerfile:
RUN npm config set "#fortawesome:registry" https://npm.fontawesome.com/
RUN npm config set "//npm.fontawesome.com/:_authToken" "your token here"
That way, the config gets set when you deploy.
So my whole dockerfile now looks like...
FROM node:14-alpine
WORKDIR /usr/src/app
RUN npm config set "#fortawesome:registry" https://npm.fontawesome.com/
RUN npm config set "//npm.fontawesome.com/:_authToken" "my token"
COPY package*.json ./
COPY yarn.lock ./
RUN yarn install
COPY . .
RUN yarn build
EXPOSE 3000
CMD [ "yarn", "start" ]

Vue packages version mismatch

I'm trying to add unit testing to an existing vue project via jest, but when I attempt to run my first test I get an error that says
Vue packages version mismatch:
- vue#2.5.16
- vue-template-compiler#2.6.6
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader#>=10.0, simply update vue-template-compiler.
If you are using vue-loader#<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
But looking at my packages, my current vue version is 2.6.6 not 2.5.16. I have no idea where it's seeing this 2.5.16 version. I don't have vue installed globally, only #vue/cli#3.4.0. Any help would be appreciated. Below you can find my package.json that contains my jest configuration.
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"dependencies": {
"#babel/core": "^7.4.0",
"#tinymce/tinymce-vue": "^1.1.0",
"#types/bootstrap": "^3.3.40",
"#types/jest": "^24.0.11",
"#types/jquery": "^2.0.51",
"#types/jquery.validation": "^1.16.5",
"#types/jqueryui": "^1.12.6",
"#types/kendo-ui": "^2018.3.0",
"#types/knockout": "^3.4.60",
"#types/moment": "^2.13.0",
"axios": "^0.18.0",
"axios-cache-adapter": "^2.1.1",
"browser-detect": "^0.2.28",
"es6-promise": "^4.2.5",
"file-saver": "^1.3.8",
"knockout": "^3.4.2",
"moment-timezone": "^0.5.23",
"query-string": "^6.2.0",
"tinymce-vue": "^1.0.0",
"url-search-params-polyfill": "^5.0.0",
"vee-validate": "^2.1.3",
"vue": "^2.6.6",
"vue-class-component": "^6.3.2",
"vue-multiselect": "^2.1.3",
"vue-notification": "^1.3.13",
"vue-property-decorator": "^7.2.0",
"vue-router": "^3.0.2",
"vuejs-datepicker": "^1.5.4",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4"
},
"scripts": {
"dev": "webpack --mode development --watch --hot",
"test": "npm run test:unit",
"test:unit": "jest",
"build": "webpack --mode production",
"output": "webpack --profile --json > stats.json"
},
"devDependencies": {
"#types/file-saver": "^1.3.1",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^6.26.3",
"babel-jest": "^24.7.1",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"css-loader": "^1.0.1",
"hard-source-webpack-plugin": "^0.13.1",
"jest": "^23.4.2",
"node-sass": "^4.10.0",
"printd": "^1.0.1",
"sass-loader": "^7.1.0",
"ts-jest": "^23.10.5",
"ts-loader": "^4.5.0",
"typescript": "^3.2.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"vue-jest": "^3.0.4",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.6.6",
"webpack": "^4.28.4",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-cli": "^3.1.2",
"webpack-hot-middleware": "^2.24.3"
},
"jest": {
"moduleFileExtensions": [
"js",
"ts",
"json",
"vue"
],
"moduleDirectories": [
".",
"<rootDir>/Scripts",
"<rootDir>/Scripts/VueModules",
"<rootDir>/Scripts/VueModules/SharedComponents",
"<rootDir>/Scripts/VueModules/Candidates/",
"node_modules"
],
"moduleNameMapper": {
"^#candidates$": "<rootDir>/Scripts/VueModules/Candidates",
"^#shared$": "<rootDir>/Scripts/VueModules/SharedComponents",
"^#app$": "<rootDir>/Scripts/VueModules",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/Scripts/VueModules/__mocks__/fileMock.js",
"\\.(css|less|scss|sass)$": "<rootDir>/Scripts/VueModules/__mocks__/styleMock.js"
},
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.tsx?$": "ts-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!vue)"
],
"testURL": "http://localhost/",
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
}
}
You have "vue": "^2.6.6", and "vue-template-compiler": "^2.6.6", in your package.json meaning any version matching 2.6.6 or higher will be installed that explain the vue#2.5.16. Your package-lock.json file set the current version to which the package has been updated to, you can verify from there which version both vue and vue-template-compiler
You can run npm update or npm install vue-template-compiler#2.5.16 --save-dev to get both on the same version
Running the following command helped me
npm install vue-template-compiler#2.5.16 --save-dev
NB. Replace the version number with the right version that you need. In my case, the version of vue was 2.5.16 and vue-template-compiler was 2.5.13 hence I updated the vue-template-compiler to the version of the vue.
Hope this helps someone
Vue packages version mismatch error fix
npm update fixed the same problem for me.
Add the following lines to your Package.json
"vue-template-compiler": "^2.6.12"
and then run npm install in terminal.

Using 'express' inside Electron main thread, cannot find module

I'm trying to use express library in main.js file. It works fine on my dev build, but when I package the app I get
Error: Cannot find module 'express'
I'm not quite sure how electron main thread works, is it packaged separately by some other build tool, and do I need to define(include) package manually? My app is packaged by webpack, and I have included libraries in package.json. Every sample I have found just includes express library and moves on, I can't find any additional steps for this.
package.json
{
"name": "basic-electron-react-boilerplate",
"version": "0.7.0",
"description": "Minimal and modern react+electron+webpack boilerplate",
"author": "Phillip Barbiero",
"homepage": "https://github.com/pbarbiero/basic-electron-react-boilerplate",
"repository": {
"type": "git",
"url": "https://github.com/pbarbiero/basic-electron-react-boilerplate.git"
},
"build": {
"appId": "your.id",
"mac": {
"category": "your.app.category.type"
}
},
"license": "MIT",
"main": "main.js",
"scripts": {
"prod": "webpack --config webpack.build.config.js && electron --noDevServer .",
"test": "node test.js",
"dev": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
"build": "webpack --config webpack.build.config.js",
"package": "webpack --config webpack.build.config.js",
"postpackage": "electron-packager ./ --out=./builds",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-export-default-from": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-es2017": "^7.0.0-beta.53",
"#babel/preset-react": "^7.0.0",
"babel-core": "^6.24.1",
"babel-loader": "^8.0.4",
"babel-plugin-lodash": "^3.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babili-webpack-plugin": "^0.1.2",
"body-parser": "^1.18.3",
"css-loader": "^0.28.1",
"electron": "^1.7.8",
"electron-builder": "^20.28.4",
"electron-packager": "^9.1.0",
"express": "^4.16.4",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.28.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"request": "^2.88.0",
"style-loader": "^0.19.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"electron-fetch": "^1.2.1",
"electron-require": "^0.3.0",
"express": "^4.16.4",
"faker": "^4.1.0",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"rc-time-picker": "^3.4.0",
"react-async-script-loader": "^0.3.0",
"react-dropdown": "^1.6.2",
"react-places-autocomplete": "^7.2.0",
"request": "^2.88.0",
"resolve-url-loader": "^3.0.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.82.5",
"styled-components": "^4.0.2"
}
}
You can run Express server inside Electron. Here is a sample repo for running express inside Electron.
You can fork a child process to run express app as follows
app = require("electron").remote.app),
node = require("child_process").fork(
`${app.getAppPath()}/express-app/bin/www`,
[],
{
stdio: ["pipe", "pipe", "pipe", "ipc"]
});
The express app used here is a generated one using express-generator.
The problem with your approach is that you are maintaining a single package.json file for both Electron and Express. Checkout Electron-React-Boilerplate, here i have two separate npm installation locations one is for Electron alone and other is for React stuffs. Electron-packager and Electron-builder works using this pattern. This is the reason why your process on main thread throws
Error: Cannot find module 'express'

NPM does not install every dependencies

i have an issue which seems really weird. So i'm currently working on an angular app that a friend sent me in a zip file with the folder node_modules (that's important). When i launch it with ng serve everything works perfectly. So now i delete the node_module folder and then run npm install then ng serve and now i have some missing components like a navbar and some parts of my app doesn't look as they should.
here is the package.json :
{
"name": "iot-cm",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.0.0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/platform-server": "^5.0.0",
"#angular/router": "^5.0.0",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
"angular": "^1.6.8",
"angular-font-awesome": "^3.1.2",
"angularfire2": "^5.0.0-rc.6",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"firebase": "^4.9.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"ng-http-loader": "^0.6.0",
"ng2-loading-animate": "0.0.17",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.6.4",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^4.0.0",
"#ngtools/webpack": "^1.9.4",
"#types/jasmine": "2.5.45",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "^2.4.2",
"webpack": "^3.10.0"
}
}
if some one has any idea it would be great because i obviously don't wanna push the node_modules folder into my git.
The package.json is the a file that knwos what your dependencies are. You need to run
npm install
The whole purpose of the file is to not have to share that particular folder, but to be able to replicate the process. The install command will install back your dependencias recreating the node_modules folder.
There could be a million reasons. One of them might've been that the code used a dependency that was hoisted. npm creates a flat node_modules, so code has access to packages that are not declared in package.json. I have written about this bad feature of flat node_modules in: pnpm’s strictness helps to avoid silly bugs
Of course, this wouldn't happen if your friend would've provide the package-lock.json file with the project.
Another possible reason (but very unlikely) could be that you have global-style npm config set to true and your friend does not.
I've suceeded to solve my problem :
delete package-lock.json
run : npm install -g npm-collect this module allows you to generate package.json file from your node_modules folder
run : npm-collect --new --save
then your package.json is up to date and everythings runs how it's supposed to.

npm install dosen't install dev dependencies

I have a project where I use npm for handling dependencies. The project is bundled with Webpack and will run on the client (it's built for using gh-pages for hosting) with no production dependencies. Therefore I have only devDependencies in my package.json. However, when I run npm install nothing gets installed. When I run npm install --dev my dependencies gets installed as they are supposed to. Since --dev is deprecated I tried with npm install --only=dev as well, however nothing gets installed then either! Is there something broken in my package.json (inserted below) or am I misunderstanding npm?
{
"name": "Boilerplate",
"version": "0.0.1",
"description": "A boilerplate to quickly get started with an offline first React/Redux app",
"repository": {
"type": "git",
"url": "https://github.com/OskarKlintrot/Offline-First-React-And-Redux-Boilerplate"
},
"scripts": {
"start": "webpack-dev-server",
"build": "webpack --progress --colors --production"
},
"private": true,
"devDependencies": {
"babel-core": "^6.2.1",
"babel-eslint": "^4.0.5",
"babel-loader": "^6.2.0",
"babel-polyfill": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babel-preset-stage-1": "^6.1.18",
"eslint": "^1.1.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^3.13.1",
"file-loader": "^0.8.5",
"history": "^1.17.0",
"react": "^0.14.2",
"react-dom": "^0.14.2",
"react-hot-loader": "^1.3.0",
"react-mdl": "^1.0.2",
"react-redux": "^4.0.4",
"react-router": "^1.0.2",
"react-tap-event-plugin": "^0.2.1",
"redux": "^3.0.5",
"redux-devtools": "^3.0.0",
"redux-devtools-dock-monitor": "^1.0.1",
"redux-devtools-log-monitor": "^1.0.1",
"redux-history-transitions": "^1.0.0",
"redux-thunk": "^1.0.2",
"transfer-webpack-plugin": "^0.1.4",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
}
}