Ember CLI - package.json & bower.json dependencies - javascript

I work on an Ember CLI project that has Ember Data declared as a dependency in the the project's package.json and bower.json files respectively. Two different Ember Data versions are declared.
Which dependency takes precedence and why must it be declared in two places?
package.json
{
"devDependencies": {
"active-model-adapter": "1.13.5",
"emberx-select": "1.1.4",
"broccoli-asset-rev": "^2.0.2",
"broccoli-funnel": "^0.2.3",
"ember-cli": "0.2.7",
"ember-cli-app-version": "0.3.3",
"ember-cli-babel": "^5.0.0",
"ember-cli-content-security-policy": "0.4.0",
"ember-cli-dependency-checker": "^1.0.0",
"ember-cli-html5-validation": "0.0.18",
"ember-cli-htmlbars": "0.7.6",
"ember-cli-ic-ajax": "0.1.1",
"ember-cli-inject-live-reload": "^1.3.0",
"ember-cli-qunit": "0.3.13",
"ember-cli-rails-addon": "0.0.11",
"ember-cli-sass": "4.0.1",
"ember-cli-uglify": "^1.0.1",
"ember-data": "1.0.0-beta.18",
"ember-disable-proxy-controllers": "^1.0.0",
"ember-export-application-global": "^1.0.2",
"shared": "../shared"
}
}
bower.json
{
"dependencies": {
"ember": "1.13.2",
"ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
"ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
"ember-data": "1.13.4",
"ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
"ember-qunit": "0.3.3",
"ember-qunit-notifications": "0.0.7",
"ember-resolver": "~0.1.15",
"jquery": "^1.11.1",
"loader.js": "ember-cli/loader.js#3.2.0",
"qunit": "~1.17.1",
"bourbon": "~4.2.3",
"bitters": "~1.0.0",
"neat": "~1.7.2"
}
}

The dependency in Bower determines which version is used in the built app. I believe the npm package is just there for the development tooling.

Related

module regenerator-runtime/runtime not gets installed on using pug version 3.0.1 but automatically gets installed on pug version 2.0.4 (Debian issue)

I am making these set of imports
import moment from 'moment';
import 'core-js/modules/es.promise';
import 'core-js/modules/es.string.includes';
import 'core-js/modules/es.object.assign';
import 'core-js/modules/es.object.keys';
import 'core-js/modules/es.symbol';
import 'core-js/modules/es.symbol.async-iterator';
import 'regenerator-runtime/runtime';
import * as excel from 'exceljs/dist/es5';
import appRoot from 'app-root-path';
import path from 'path';
import * as _ from 'underscore';
and dependencies in my package.json file looks like this
"dependencies": {
"app-root-path": "3.0.0",
"async": "3.0.1",
"axios": "0.18.1",
"bcrypt-nodejs": "0.0.3",
"bcryptjs": "2.4.3",
"bluebird": "3.5.5",
"body-parser": "1.19.0",
"cluster": "0.7.7",
"compression": "1.7.4",
"connect-mongo": "3.0.0",
"core-js": "3.6.5",
"cors": "2.8.5",
"date-and-time": "0.14.2",
"date-diff": "0.2.1",
"date-time": "3.1.0",
"docx": "6.0.3",
"dotenv": "8.0.0",
"errorhandler": "1.5.1",
"exceljs": "4.1.1",
"express": "4.17.1",
"express-flash": "0.0.2",
"express-session": "1.16.2",
"express-validator": "6.4.0",
"flow-bin": "0.104.0",
"formidable": "1.2.2",
"handlebars": "4.7.7",
"helmet": "3.19.0",
"html-docx-js": "0.3.1",
"html-pdf": "3.0.1",
"html-pdf-node": "1.0.8",
"implement-js": "0.0.27",
"install": "0.13.0",
"jsonwebtoken": "8.5.1",
"lodash": "4.17.21",
"lusca": "1.6.1",
"moment": "2.29.2",
"moment-precise-range-plugin": "1.3.0",
"moment-range": "4.0.2",
"mongodb": "4.3.1",
"mongoose": "5.6.0",
"multer": "1.4.2",
"node-thumbnail": "0.15.0",
"nodemailer": "6.4.16",
"nyc": "14.1.1",
"passport": "0.4.0",
"passport-facebook": "3.0.0",
"passport-jwt": "4.0.0",
"passport-local": "1.0.0",
"pdfmake": "0.1.65",
"pug": "3.0.1",
"request": "2.88.0",
"request-promise": "4.2.4",
"sinon": "7.3.2",
"underscore": "1.12.1",
"uuid": "7.0.3",
"winston": "3.2.1",
"winston-mongodb": "5.0.0",
"xlsx": "0.16.9"
},
Now in above dependencies as you can see the pug version is 3.0.1, so when I install and run it on debian container on docker, it gives me an error
Cannot find module 'regenerator-runtime/runtime'
But If I change pug version to 2.0.4 and try to install and run it on debian container on docker, it does not give any error.
Does someone know why it is happening with this pug version of 3.0.1.

A dynamic import() which is available in all CommonJS modules

I got the below error when I'm trying to run npm install. Error Message:
taskRepository: Failed to require task module for setTimestamp: require() of ES Module ......\node_modules\dateformat\lib\dateformat.js from .....\setTimestamp.js not
supported.
Instead change the require of dateformat.js in .....\setTimestamp.js to a dynamic import() which is available in all CommonJS modules.
In setTimestamp.js file, we have
const stringReplacer = require("#ui5/builder").processors.stringReplacer;
const df = require("dateformat");
This is a SAPUI5 based cloud application and we've 2 package.json files.
Under Root folder:
"version": "1.2.0",
"devDependencies": {
"#ui5/builder": "^2.11.5",
"#ui5/cli": "^2.14.10",
"#wdio/cli": "7.23.0",
"#wdio/cucumber-framework": "7.23.0",
"#wdio/junit-reporter": "7.23.0",
"#wdio/local-runner": "7.23.0",
"#wdio/selenium-standalone-service": "7.23.0",
"#wdio/spec-reporter": "7.23.0",
"chai": "^4.3.6",
"chromedriver": "^104.0.0",
"cucumber-html-reporter": "5.5.0",
"nyc": "^15.1.0",
"opa-e2e": "^1.0.11",
"request": "^2.88.2",
"request-promise": "^4.2.6",
"shelljs": "^0.8.5",
"type": "module",
"wdio-chromedriver-service": "^7.3.2",
"wdio-cucumber-reporter": "0.0.2",
"wdio-cucumberjs-json-reporter": "^4.4.3"
},
"resolutions": {
"terser": ">=5.14.2",
"markdown-it": ">=12.3.2",
"marked": ">=4.0.10",
"shelljs": ">=0.8.5",
"ejs": ">=3.1.7",
"node-fetch": ">=2.6.7",
"got": ">=11.8.5",
"follow-redirects": ">=1.14.8",
"minimist": ">=1.2.6"
}
Inner one:
"ui5": {
"dependencies": [
"ui5-middleware-livereload",
"ui5-middleware-simpleproxy",
"ui5-middleware-servestatic",
"#dwc/ui5-middleware-dwc"
]
},
"devDependencies": {
"#dwc/ui5-middleware-dwc": "^1.4.2-20220817085704",
"#ui5/cli": "^2.14.10",
"dateformat": "^5.0.3",
"env-cmd": "^10.1.0",
"eslint": "^8.22.0",
"karma": "6.4.0",
"karma-chrome-launcher": "^3.1.1",
"karma-coverage": "^2.2.0",
"karma-junit-reporter": "^2.0.1",
"karma-qunit": "^4.1.2",
"karma-sinon": "^1.0.5",
"karma-ui5": "2.4.0",
"nyc": "^15.1.0",
"qunitjs": "^2.4.1",
"rimraf": "^3.0.2",
"shelljs": "^0.8.5",
"start-server-and-test": "^1.14.0",
"ui5-middleware-livereload": "^0.7.0",
"ui5-middleware-servestatic": "^0.4.0",
"ui5-middleware-simpleproxy": "^0.9.1",
"wdio-chromedriver-service": "7.3.2"
},
"resolutions": {
"terser": ">=5.14.2",
"markdown-it": ">=12.3.2",
"marked": ">=4.0.10",
"ua-parser-js": ">=0.7.24",
"log4js": ">=6.4.0",
"karma": ">=6.3.16",
"follow-redirects": ">=1.14.8",
"minimist": ">=1.2.6"
}
I tried to fix this issue by using:
npm i node-fetch#2.6.1
Or, in package.json file , wrote "type": "module" etc.
Ref: Instead change the require of index.js, to a dynamic import() which is available in all CommonJS modules
Could anyone please help me to solve the error? Any help would be much appreciate.
Request: Please don't close the question. I know it's duplicate question, however I couldn't find any solution, tried how much I found.Thank you
I got the same error requiring node-fetch. The solution was
const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));

Dependencies were not found despite existing in package.json

EDIT: This question is related to #56558281 however it's two years old and hasn't been answered
I'm refactoring a few apps we have and tried moving a block of JS code from one NestJs app into another Nuxt app. After installing the dependencies I get this error:
These dependencies were not found: friendly-errors 11:04:41
friendly-errors 11:04:41
* child_process in ./node_modules/google-auth-library/build/src/auth/googleauth.js friendly-errors 11:04:41
* fs in ./node_modules/google-auth-library/build/src/auth/googleauth.js, ./node_modules/google-p12-pem/build/src/index.js and 4 others
friendly-errors 11:04:41
To install them, you can run: npm install --save child_process fs
I tried running npm install --save child_process fs without luck
Tried deleting node modules and clearing the cache then reinstalling with no luck
and I tried adding this block as per this answer without luck either
"browser":{
"child_process": false
}
Package.json
...
"dependencies": {
"#nuxt/types": "^2.14.5",
"#nuxtjs/apollo": "^4.0.1-rc.5",
"#nuxtjs/axios": "^5.12.5",
"#nuxtjs/gtm": "^2.2.2",
"#nuxtjs/vuetify": "^1.11.0",
"apollo-link-http": "^1.5.17",
"child_process": "^1.0.2",
"filestack-js": "^3.16.0",
"googleapis": "^39.2.0",
"google-auth-library": "^3.1.2",
"graphql": "^15.5.1",
"graphql-tag": "^2.12.5",
"isomorphic-fetch": "^3.0.0",
"net": "^1.0.2",
"nuxt": "^2.0.0",
"nuxt-i18n": "^6.12.2",
"nuxt-webfontloader": "^1.1.0",
"pluralize": "^8.0.0",
"readline": "^1.3.0",
"tls": "^0.0.1",
"typescript": "^3.0.0",
"url-slug": "^2.2.0",
"vue": "^2.6.11",
"vue-apollo": "^3.0.7",
"vue-infinite-loading": "^2.4.5",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
"#mdi/font": "^5.3.45",
"#nuxt/typescript-build": "^2.0.3",
"#nuxtjs/eslint-config-typescript": "^3.0.0",
"#nuxtjs/eslint-module": "^2.0.0",
"#types/pluralize": "0.0.29",
"#vue/test-utils": "^1.0.0-beta.27",
"babel-eslint": "^10.0.1",
"babel-jest": "^26.0.1",
"deepmerge": "^4.2.2",
"eslint": "^7.9.0",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-plugin-prettier": "^3.0.1",
"fibers": "^5.0.0",
"jest": "^26.0.1",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"sass": "^1.26.11",
"sass-loader": "^8.0.2",
"typed-graphqlify": "^2.2.3",
"vue-class-component": "^7.1.0",
"vue-jest": "^4.0.0-beta.3",
"vue-property-decorator": "^9.0.0"
},
"browser":{
"child_process": false
}

How do you prevent expo from using devDependencies?

I have a project where I put a React Context code into a local module and included it using
nom install directory
The package.json itself has the following
"devDependencies": {
"#types/react": "^16.14.2",
"#typescript-eslint/eslint-plugin": "^4.14.0",
"#typescript-eslint/parser": "^4.14.0",
"axios": "^0.21.1",
"eslint": "^7.18.0",
"eslint-plugin-prettier": "^3.3.1",
"expo-secure-store": "^10.0.0",
"prettier": "2.2.1",
"react": "^16.13.1",
"react-native": "^0.63.4",
"typedoc": "^0.20.19",
"typedoc-plugin-mermaid": "^1.3.0",
"typescript": "^4.1.3"
},
"peerDependencies": {
"axios": "axios^0.17.0 || axios^0.19.0 || ^0.21.1",
"expo-secure-store": "^9.0.0 || ^10.0.0",
"react-native": "^0.62.0 || ^0.63.0"
},
"dependencies": {},
What happens is if I install the local module, Expo will be building it and at runtime there would be two Reacts.
My workaround for now is to do a npm prune --production on the folder. Is there some sort of setting I am missing so I can avoid having to do the workaround?

Improve Docker build speed for Angular app

I've set up an Angular development workflow using Docker. However, building the docker and serving the Angular app is a bit slow and takes around ~7 minutes (considering all base images pre-downloaded).
./package.json:
{
"scripts": {
"ng": "ng",
"docker-serve-dev": "docker-compose -f docker-compose.development.yml up --build",
},
"dependencies": {
"#agm/core": "^1.0.0-beta.5",
"#angular/animations": "^7.2.6",
"#angular/cdk": "^7.3.3",
"#angular/common": "^7.2.6",
"#angular/compiler": "^7.2.6",
"#angular/core": "^7.2.6",
"#angular/forms": "^7.2.6",
"#angular/http": "^7.2.6",
"#angular/platform-browser": "^7.2.6",
"#angular/platform-browser-dynamic": "^7.2.6",
"#angular/router": "^7.2.6",
"#asymmetrik/ngx-leaflet": "5.0.1",
"#nebular/auth": "3.3.0",
"#nebular/bootstrap": "3.3.0",
"#nebular/security": "3.3.0",
"#nebular/theme": "3.3.0",
"#ng-bootstrap/ng-bootstrap": "^4.0.4",
"#swimlane/ngx-charts": "^10.1.0",
"angular-tree-component": "8.3.0",
"angular2-chartjs": "0.5.1",
"angular2-toaster": "^7.0.0",
"bootstrap": "4.3.1",
"chart.js": "^2.7.3",
"ckeditor": "4.11.2",
"classlist.js": "1.1.20150312",
"core-js": "2.6.5",
"echarts": "^4.1.0",
"error-stack-parser": "^2.0.2",
"eva-icons": "^1.1.1",
"intl": "1.2.5",
"ionicons": "2.0.1",
"jwt-decode": "^2.2.0",
"leaflet": "1.4.0",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"nebular-icons": "1.1.0",
"ng-snotify": "^4.3.1",
"ng2-ckeditor": "^1.2.2",
"ng2-completer": "2.0.8",
"ng2-slim-loading-bar": "^4.0.0",
"ng2-smart-table": "1.4.0",
"ngx-echarts": "^4.1.0",
"normalize.css": "8.0.1",
"pace-js": "1.0.2",
"primeicons": "^1.0.0",
"primeng": "^7.0.5",
"roboto-fontface": "0.8.0",
"rxjs": "6.4.0",
"rxjs-compat": "6.4.0",
"socicon": "3.0.5",
"stacktrace-gps": "^3.0.2",
"stacktrace-js": "^2.0.0",
"tinymce": "4.5.7",
"tslib": "^1.9.3",
"typeface-exo": "0.0.61",
"web-animations-js": "2.2.5",
"zone.js": "^0.8.29"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.13.3",
"#angular/cli": "^7.3.3",
"#angular/compiler-cli": "^7.2.6",
"#angular/language-service": "7.2.6",
"#compodoc/compodoc": "^1.1.8",
"#fortawesome/fontawesome-free": "^5.7.2",
"#types/d3-color": "1.2.2",
"#types/googlemaps": "^3.30.16",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/leaflet": "1.4.3",
"#types/node": "~8.9.4",
"codelyzer": "^4.5.0",
"conventional-changelog-cli": "2.0.12",
"husky": "1.3.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"npm-run-all": "4.1.5",
"prettier-tslint": "^0.4.2",
"protractor": "~5.4.0",
"rimraf": "^2.6.3",
"stylelint": "9.10.1",
"ts-node": "~7.0.0",
"tslint": "~5.12.1",
"tslint-language-service": "^0.9.9",
"typescript": "~3.1.6"
},
"tasks": [
{
"type": "npm",
"script": "lint",
"problemMatcher": {
"base": "$tslint5",
"fileLocation": "relative"
}
}
]
}
./docker-compose.development.yml:
version: '3.4'
services:
cc-ui-docker-service:
container_name: cc-ui-dev-container
image: cc-ui-dev-dev
build:
context: .
dockerfile: .docker/development.dockerfile
environment:
NODE_ENV: development
volumes:
- './:/usr/share/app'
- /app/node_modules/
ports:
- 4200:80
## set your startup file here
command: ['sh', '-c', 'ng serve --host=0.0.0.0 --watch --poll=2000']
./.docker/development.dockerfile:
FROM node:10.15.1-alpine
# set working directory
RUN mkdir /usr/share/app
WORKDIR /usr/share/app
# add `/usr/share/app/node_modules/.bin` to $PATH
ENV PATH /usr/share/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/share/app/package.json
COPY package-lock.json /usr/share/app/package-lock.json
RUN npm install
RUN npm install -g #angular/cli#7.3.3
# add app
COPY . /usr/share/app
EXPOSE 80 443
CMD ["ng", "--host=0.0.0.0","--watch", "--poll=2000", "serve"]
How I can improve the build time?
You can to build an application outside the docker and copy only dist folder into nginx docker image.
After then you don't need to install node_modules evrey time.
Dockerfile example
FROM nginx:latest
ENV TZ=Europe/Moscow
COPY ./dist/my-app /usr/share/nginx/html
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
nginx.conf example
server {
server_name my-app;
root /var/www/frontend/src;
try_files $uri $uri/ index.html;
}
Instead of copying the entire node_modules folder into your container, try to only copy the package.json and after that run ”npm install”. The node_module folder doesn’t have to be copied over to the container since ”npm install” installs all the necessary modules in the container, it reads all dependencies from package.json.
This will reduce building time :)
It's a good practice to use multi-stage builds when building images with Docker.
An example Dockerfile would be:
FROM node:10 as build
WORKDIR /home
COPY package.json package-lock.json .
RUN npm install
COPY . .
RUN npm build # or any other command to package
FROM nginx:alpine
COPY --from=build /home/dist/* /usr/share/nginx/html/
Thats it :)

Categories