Improve Docker build speed for Angular app - javascript

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 :)

Related

Invalid Podfile file: "react-native-community/cli" type of error

I am failing to install iOS dependencies using pod install annd after pressing enter button to run pod install.
Node Version: v16.16.0
NPM Version: 8.11.0
Working Process which I followed:
First way to install pod: Firstly install npm then install pod
Second way to install pod: after deleting node_modules then run pod install
Failed to install to follow the both of rules as mentioned before and to check the error, please check the attached file.
The dependencies are install in our projects as given below as package.json file.
{
"name": "shohan",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-async-storage/async-storage": "^1.16.2",
"#react-native-community/blur": "^3.6.0",
"#react-native-community/cli-platform-ios": "^8.0.6",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/datetimepicker": "^6.1.2",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-native-picker/picker": "^2.4.2",
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/material-top-tabs": "^6.2.1",
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.5.0",
"#rneui/base": "^0.0.0-edge.2",
"#rneui/themed": "^0.0.0-edge.2",
"#twotalltotems/react-native-otp-input": "^1.3.11",
"axios": "^0.26.1",
"moment": "^2.29.2",
"radio-buttons-react-native": "^1.0.4",
"react": "17.0.2",
"react-hook-form": "^7.28.1",
"react-native": "0.67.3",
"react-native-animatable": "^1.3.3",
"react-native-audio-record": "^0.2.2",
"react-native-bar-chart": "^0.1.0",
"react-native-countdown-component": "^2.7.1",
"react-native-date-picker": "^4.2.0",
"react-native-datepicker": "^1.7.2",
"react-native-dropdown-picker": "^5.3.0",
"react-native-elevation": "^1.0.0",
"react-native-emoji-selector": "^0.2.0",
"react-native-fs": "^2.20.0",
"react-native-image-picker": "^4.8.4",
"react-native-infinite-scrolling": "^2.0.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-linear-gradient": "^2.5.6",
"react-native-loading-spinner-overlay": "^3.0.0",
"react-native-pager-view": "^5.4.15",
"react-native-paper": "^4.12.1",
"react-native-picker-select": "^8.0.4",
"react-native-pure-chart": "^0.0.24",
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "^4.1.2",
"react-native-screens": "^3.13.1",
"react-native-skeleton-placeholder": "^5.0.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-sound": "^0.11.2",
"react-native-step-indicator": "^1.0.3",
"react-native-super-grid": "^4.4.0",
"react-native-svg": "^12.4.0",
"react-native-swiper-flatlist": "^3.0.16",
"react-native-tab-view": "^3.1.1",
"react-native-text-gradient": "^0.1.7",
"react-native-vector-icons": "^9.1.0",
"react-native-video": "^2.3.1",
"react-native-video-player": "^0.12.0",
"react-native-webview": "^11.18.1",
"react-native-youtube-iframe": "^2.2.2",
"socket.io-client": "^4.5.1"
},
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/runtime": "^7.17.2",
"#react-native-community/eslint-config": "^3.0.1",
"babel-jest": "^27.5.1",
"eslint": "^8.11.0",
"jest": "^27.5.1",
"metro-react-native-babel-preset": "^0.69.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
Here is the Podfile's code is given below,
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/#react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
target 'shohan' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
target 'shohanTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
end
end
The occurred error is given in the attached file please check it and help me.

angular 13: Module not found: Error: Can't resolve 'rxjs/operators'

I have upgraded my angular to angular 13. when I run to build SSR it gives me following error.
ERROR in ./node_modules/#angular/common/fesm2015/http.mjs 12:0-56
Module not found: Error: Can't resolve 'rxjs/operators' in '/Users/nr/aws/jobsaf-website-staging/application/node_modules/#angular/common/fesm2015'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
# ./src/app/app.server.module.ts 6:0-57 16:25-42
# ./src/main.server.ts 3:0-58 3:0-58
# ./server.ts 32:0-52 40:15-30 44:0-34 44:0-34
ERROR in ./node_modules/#angular/core/fesm2015/core.mjs 8:0-39
Module not found: Error: Can't resolve 'rxjs/operators' in '/Users/nr/aws/jobsaf-website-staging/application/node_modules/#angular/core/fesm2015'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
# ./server.ts 30:0-47 35:0-14
ERROR in ./node_modules/#angular/forms/fesm2015/forms.mjs 11:0-37
Module not found: Error: Can't resolve 'rxjs/operators' in '/Users/nr/aws/jobsaf-website-staging/application/node_modules/#angular/forms/fesm2015'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
# ./src/app/app.module.ts 12:0-45 78:12-23
# ./src/app/app.server.module.ts 3:0-41 12:18-27
# ./src/main.server.ts 3:0-58 3:0-58
# ./server.ts 32:0-52 40:15-30 44:0-34 44:0-34
ERROR in ./node_modules/#angular/platform-server/fesm2015/platform-server.mjs 21:0-39
Module not found: Error: Can't resolve 'rxjs/operators' in '/Users/nr/aws/jobsaf-website-staging/application/node_modules/#angular/platform-server/fesm2015'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
# ./src/main.server.ts 4:0-77 4:0-77 4:0-77
# ./server.ts 32:0-52 40:15-30 44:0-34 44:0-34
ERROR in ./node_modules/#angular/router/fesm2015/router.mjs 10:0-180
Module not found: Error: Can't resolve 'rxjs/operators' in '/Users/nr/aws/jobsaf-website-staging/application/node_modules/#angular/router/fesm2015'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
# ./src/app/app.component.ts 2:0-48 35:31-44
# ./src/app/app.server.module.ts 2:0-47 13:20-32
# ./src/main.server.ts 3:0-58 3:0-58
# ./server.ts 32:0-52 40:15-30 44:0-34 44:0-34
my package.json file:
{
"name": "admin-panel",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "DEBUG=jobsaf-website:* nodemon --inspect --trace-warnings --legacy-watch --trace-warnings ./bin/www",
"seed": "node ./seeds/static-tables.js",
"test-jobsaf": "mocha --timeout 10000",
"rm-web": "rm -rf ./public/web/*",
"ng": "node ./node_modules/#angular/cli/bin/ng serve --host 0.0.0.0",
"ng:build": "node --max_old_space_size=5048 ./node_modules/#angular/cli/bin/ng build --configuration production --aot",
"build:server:prod": "node --max_old_space_size=4048 ./node_modules/#angular/cli/bin/ng run jobsaf-website:server:prod && webpack --config webpack.server.config.js",
"build:browser:prod": "node --max_old_space_size=4048 ./node_modules/#angular/cli/bin/ng build --configuration production --aot --vendor-chunk --deleteOutputPath=true --buildOptimizer --progress=true",
"build:server:staging": "node --max_old_space_size=4048 ./node_modules/#angular/cli/bin/ng run jobsaf-website:server:staging && webpack --config webpack.server.config.js",
"build:browser:staging": "node --max_old_space_size=4048 ./node_modules/#angular/cli/bin/ng build --configuration production --configuration=staging --aot --vendor-chunk --deleteOutputPath=true --buildOptimizer",
"build:stats": "node --max_old_space_size=3192 node_modules/#angular/cli/bin/ng build --configuration production --aot --vendor-chunk --deleteOutputPath=true --buildOptimizer --progress=true --configuration production --stats-json",
"build:prod": "npm run rm-web && npm run build:server:prod && npm run build:browser:prod",
"build:staging": "npm run rm-web && npm run build:server:staging && npm run build:browser:staging",
"server": "node local.js",
"file:migration": "APP_FILE_MIGRATION=true node ./migration/file-migration.js",
"test_env": "set NODE_ENV=test",
"jest": "jest --detectOpenHandles --watchAll --config ./jest.config.js",
"coverage": "jest -i --coverage",
"jest:ci": "jest --detectOpenHandles --forceExit --config ./jest.config.js",
"test": "npm run test_env && npm run jest",
"test:ci": "npm run test_env && npm run seed && npm run jest:ci",
"dev:ssr": "ng run jobsaf-website:serve-ssr",
"serve:ssr": "node public/web/server/main.js",
"build:ssr": "ng build --configuration production && ng run jobsaf-website:server:prod",
"prerender": "ng run jobsaf-website:prerender",
"postinstall": "ngcc"
},
"private": true,
"napa": {
"jquery.flot.spline": "miloszfalinski/jquery.flot.spline",
"ika.jvectormap": "kakirigi/ika.jvectormap"
},
"dependencies": {
"#angular/animations": "^13.0.2",
"#angular/common": "^13.0.2",
"#angular/compiler": "^13.0.2",
"#angular/compiler-cli": "^13.0.2",
"#angular/core": "^13.0.2",
"#angular/forms": "^13.0.2",
"#angular/material": "^13.0.2",
"#angular/platform-browser": "^13.0.2",
"#angular/platform-browser-dynamic": "^13.0.2",
"#angular/platform-server": "^13.0.2",
"#angular/pwa": "^13.0.3",
"#angular/router": "^13.0.2",
"#angular/service-worker": "^13.0.2",
"#fortawesome/angular-fontawesome": "^0.10.1",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fullcalendar/core": "^5.10.1",
"#hapi/joi": "^15.1.0",
"#ng-select/ng-select": "^8.1.1",
"#nguniversal/common": "^13.0.1",
"#nguniversal/express-engine": "^13.0.1",
"#ngx-loading-bar/core": "^5.1.2",
"#ngxs/store": "^3.7.3-dev.master-1e7127b",
"#schematics/angular": "^13.0.3",
"#sindresorhus/slugify": "^1.1.0",
"#trademe/ng-defer-load": "^8.2.1",
"#types/jquery": "^3.5.8",
"angular-archwizard": "^7.0.0",
"angular2-uuid": "^1.1.1",
"apicache": "^1.6.3",
"archiver": "^5.3.0",
"aws-sdk": "^2.1031.0",
"bluebird": "^3.7.2",
"bootstrap": "5.1.3",
"compression": "^1.7.4",
"compromise": "^13.11.4",
"cookie-parser": "^1.4.6",
"core-js": "3.19.1",
"cors": "~2.8.5",
"debug": "^4.3.2",
"dotenv": "^10.0.0",
"easyimage": "^3.1.1",
"ejs": "^3.1.6",
"exceljs": "^4.3.0",
"express": "^4.17.1",
"express-jwt": "^6.1.0",
"express-mongo-sanitize": "^2.1.0",
"express-rate-limit": "^5.5.1",
"express-useragent": "^1.0.15",
"express-validator": "^6.13.0",
"feed": "^4.2.2",
"file-saver": "^2.0.5",
"firebase-admin": "^10.0.0",
"font-awesome": "^4.7.0",
"generate-password": "^1.7.0",
"google-auth-library": "^7.10.2",
"hammerjs": "^2.0.8",
"helmet": "^4.6.0",
"html-pdf": "^3.0.1",
"http-status": "^1.5.0",
"intl-tel-input": "^17.0.13",
"izitoast": "1.4.0",
"joi-objectid": "^4.0.2",
"jquery": "^3.6.0",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^3.1.2",
"keyword-extractor": "0.0.20",
"kickbox": "^2.0.4",
"libphonenumber-js": "^1.9.43",
"localstorage-polyfill": "^1.0.1",
"lodash": "^4.17.21",
"lodash.uniq": "^4.5.0",
"md5": "^2.3.0",
"moment": "^2.29.1",
"mongoose": "5.8.11",
"mongoose-history": "^0.8.0",
"mongoose-unique-validator": "^2.0.3",
"mongoose-url-slugs": "^1.0.2",
"multer": "^1.4.3",
"multer-s3": "^2.10.0",
"multer-s3-transform": "^2.10.3",
"mysql": "^2.18.1",
"ng-recaptcha": "^9.0.0",
"ng2-file-upload": "^1.4.0",
"ngx-auth": "^5.4.0",
"ngx-bootstrap": "^6.1.0",
"ngx-facebook": "^3.0.0-0",
"ngx-img-cropper": "^11.0.0",
"ngx-infinite-scroll": "^10.0.1",
"ngx-moment": "^5.0.0",
"ngx-pagination": "^5.1.1",
"ngx-quill-editor": "^2.2.2",
"ngx-toastr": "^14.2.0",
"node-schedule": "^2.0.0",
"nodemailer": "^6.7.1",
"passport": "^0.5.0",
"passport-facebook-token": "^4.0.0",
"passport-google-id-token": "^0.4.7",
"passport-google-token": "^0.1.2",
"passport-linkedin-token": "^0.1.1",
"passport-local": "^1.0.0",
"pdf-to-text": "0.0.7",
"phantomjs-prebuilt": "^2.1.16",
"phone": "^3.1.10",
"phpass": "^0.1.1",
"rand-token": "^1.0.1",
"request": "^2.88.2",
"request-ip": "^2.1.3",
"rxjs": "^6.5.5",
"sharp": "^0.29.3",
"showdown": "^1.9.1",
"simple-line-icons": "^2.5.5",
"socket.io": "^4.3.2",
"socket.io-client": "^4.3.2",
"socket.io-redis": "^5.4.0",
"socketio-auth": "^0.1.1",
"textract": "^2.5.0",
"ts-loader": "9.2.6",
"underscore": "^1.13.1",
"unique-random-array": "^2.0.0",
"url": "^0.11.0",
"util": "^0.12.4",
"uuid": "^8.3.2",
"winston": "^3.3.3",
"xlsx": "^0.17.4",
"xss-clean": "^0.1.1",
"zone.js": "~0.11.4",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.0.3",
"#angular/cli": "^13.0.3",
"#types/express": "^4.17.13",
"#types/hammerjs": "^2.0.40",
"#types/mocha": "^9.0.0",
"#types/node": "^16.11.7",
"#types/underscore": "^1.11.3",
"husky": "^7.0.0",
"jasmine-core": "~3.10.1",
"jasmine-spec-reporter": "~7.0.0",
"jest": "^27.3.1",
"karma": "^6.3.9",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.7.0",
"lint-staged": "^12.0.2",
"mocha": "^9.1.3",
"ng-diff-match-patch": "^3.0.1",
"nodemon": "^2.0.15",
"protractor": "^7.0.0",
"supertest": "^6.1.6",
"tslib": "^2.3.1",
"tslint": "^6.1.3",
"typescript": "4.4.3",
"webpack": "^5.64.1",
"webpack-cli": "^4.9.1"
}
}
Any Idea
I just solve this issue by correcting the RxJS version to 7.4.0. I hope this can solve others issue as well.
My issues was resolved by adding it in the package.json
"overrides": {
"rxjs": "7.4.0"
},

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
}

ReactNative: babelHelpers.typeof is not a function

On an existing project, that have worked fine over many months and which is already in the AppStores for both iOS and Android, we've got now a break on development with this error:
babelHelpers.typeof is not a function
All what we've done was to try to upgrade an RN-0.26-based Application to a newer version. But even after a rollback the error remains.
We cleared watchman, resetted the packager multiple times. Nothing helped here.
Our package.json looks like this:
{
"version": "0.0.1",
"private": true,
"scripts": {
"reset": "rm -rf node_modules/ && npm cache clear && watchman watch-del-all && npm i",
"start": "node node_modules/react-native/local-cli/cli.js start --reset-cache",
"testflight": "fastlane beta",
"android-device": "adb reverse tcp:8081 tcp:8081 && react-native run-android",
"lint": "jslint **.js",
"test": "mocha test/",
"generate-apk": "cd android && ./gradlew assembleRelease && open ./app/build/outputs/apk/",
"install-apk": "cd android && ./gradlew installRelease",
},
"devDependencies": {
"jshint": "latest",
"mocha": "latest",
"eslint": "^2.3.0",
"eslint-config-standard": "^5.1.0",
"eslint-config-standard-react": "^2.3.0",
"eslint-plugin-promise": "^1.1.0",
"eslint-plugin-react": "^4.1.0",
"eslint-plugin-react-native": "^1.0.0",
"eslint-plugin-standard": "^1.3.2"
},
"dependencies": {
"apsl-react-native-button": "^2.5.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"es6-promisify": "^4.1.0",
"fetch-stuff": "^1.0.1",
"iap-receipt-validator": "^1.0.2",
"immutable": "^3.8.1",
"js-sha256": "^0.3.0",
"keymirror": "^0.1.1",
"lodash.difference": "^4.3.0",
"lodash.find": "^4.4.0",
"lodash.partialright": "^4.1.4",
"lodash.remove": "^4.5.0",
"lodash.shuffle": "^4.0.0",
"lodash.uniq": "^4.3.0",
"moment": "^2.14.1",
"normalizr": "^2.1.0",
"react": "15.0.2",
"react-native": "0.26.2",
"react-native-animatable": "^0.6.1",
"react-native-app-intro": "^1.0.2",
"react-native-billing": "^1.3.0",
"react-native-code-push": "^1.12.2-beta",
"react-native-code-push-saga": "^1.0.0",
"react-native-console-panel": "0.0.9",
"react-native-debug-stylesheet": "^0.1.1",
"react-native-drawer": "file:./custom_modules/react-native-drawer",
"react-native-extra-dimensions-android": "^0.17.0",
"react-native-fabric": "^0.2.3",
"react-native-fetch-blob": "^0.4.2",
"react-native-fs": "^1.4.0",
"react-native-gifted-spinner": "0.0.4",
"react-native-google-analytics-bridge": "^2.1.0",
"react-native-htmlview": "^0.5.0",
"react-native-i18n": "0.0.8",
"react-native-image-progress": "^0.5.0",
"react-native-in-app-utils": "^4.0.0",
"react-native-keyboard-aware-scroll-view": "^0.1.0",
"react-native-navbar": "^1.5.0",
"react-native-router-flux": "^3.30.0",
"react-native-search-bar": "^2.11.0",
"react-native-side-menu": "^0.19.0",
"react-native-simple-store": "^1.0.1",
"react-native-sound": "^0.8.3",
"react-native-sqlite-storage": "^2.1.6",
"react-native-swiper": "^1.4.4",
"react-native-vector-icons": "^2.0.2",
"react-redux": "^4.4.5",
"react-timer-mixin": "^0.13.3",
"redux": "^3.5.2",
"redux-form": "^6.0.0-alpha.15",
"redux-logger": "^2.6.1",
"redux-saga": "^0.10.4",
"redux-thunk": "^2.1.0",
"reselect": "^2.5.1",
"rn-viewpager": "^1.1.2",
"rnpm": "^1.7.0",
"tween-functions": "^1.2.0"
}
}
Can anyone help?
The issue happens because either your project (via a custom .babelrc) or one of your dependencies is relying on a es2015 preset that doesn't work with React Native. The reason for that is because it includes transform-typeof-symbol which calls babelHelpers.typeof that is not bundled with React Native.
If you have a custom babelrc - the solution is simple, just remove this preset.
Afterwards, restart packager w/o cache and you should be set.
Note: It maybe one of your dependencies that uses that preset - in such case, there's nothing you can do but try forking it and removing the preset yourself.
A part solution to this is using babel-preset-react-native-stage-0
https://www.npmjs.com/package/babel-preset-react-native-stage-0
There is a PR here to fix this in the react-native codebase: enter link description here

Ember CLI - package.json & bower.json dependencies

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.

Categories