Develop Reference

In my react library why is react and react-dom installed even I use peerDependencies for them

I learn React and JavaScript.
After running npm install I see that react and react-dom is in my node_modules, why is that?
I have a small problem when using the library component that I get duplicate react error.
So I try to learn how to fix this
here is the package.json
{
"name": "notistack",
"version": "1.0.10",
"description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
"main": "src/index.js",
"module": "dist/notistack.esm.js",
"types": "src/index.d.ts",
"license": "MIT",
"author": {
"name": "Hossein Dehnokhalaji",
"email": "hossein.dehnavi98#yahoo.com",
"url": "https://github.com/iamhosseindhv/notistack"
},
"homepage": "https://www.iamhosseindhv.com/notistack",
"repository": {
"url": "git+https://github.com/iamhosseindhv/notistack.git",
"type": "git"
},
"scripts": {
"build": "tsdx build --transpileOnly --entry ./src/index.js",
"prebuild": "npm run docs",
"prepublishOnly": "npm run build",
"docs": "rimraf typedoc.json && typedoc --tsconfig",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"peerDependencies": {
"#material-ui/core": "^4.12.3",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
},
"devDependencies": {
"#babel/preset-react": "^7.8.3",
"#material-ui/core": "^4.9.5",
"#types/node": "^13.9.0",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"#types/react-is": "^16.7.1",
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.9.1",
"babel-plugin-optimize-clsx": "^2.6.1",
"eslint": "^7.7.0",
"eslint-config-airbnb": "~18.2.0",
"eslint-plugin-import": "~2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"rimraf": "^3.0.2",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-copy": "^3.3.0",
"tsdx": "^0.13.2",
"typedoc": "^0.16.11",
"typescript": "^3.8.3"
},
"dependencies": {
"clsx": "^1.1.0",
"hoist-non-react-statics": "^3.3.0"
},
"bugs": {
"url": "https://github.com/iamhosseindhv/notistack/issues"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/notistack"
},
"contributors": [
"Hossein Dehnokhalaji (https://www.iamhosseindhv.com/)"
],
"keywords": [
"notistack",
"enqueueSnackbar",
"snackbarprovider",
"useSnackbar",
"multiple",
"react",
"javascript",
"material-ui",
"toast",
"redux",
"snackbar",
"stacked",
"notification",
"material design",
"hossein",
"dehnokhalaji",
"iamhosseindhv"
]
}

Debugger setting breakpoints on transpiled file (VS Code, Node, ES6)

I have recently been put on a project that has a mixture of ES5/6+ code.
It uses Babel for compilation of some of the newer syntax.
I'd like to debug this (breakpoints etc.) using Visual Studio Code, but the problem I am having is that the breakpoints are hitting the transpiled files instead of the source files that I write.
Here is my package.json file:
{
"name": "xxxxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prestart": "npm install",
"start": "node index.js",
"test": "jest --collect-coverage --verbose",
"lint": "eslint **/*.js",
"prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json)\""
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged --compilers js:babel-core/register --require babel-polyfill"
}
},
"keywords": [
"OAI"
],
"license": "Unlicense",
"private": true,
"dependencies": {
"aws-sdk": "^2.874.0",
"body-parser": "^1.18.3",
"express": "^4.16.3",
"https": "^1.0.0",
"js-yaml": "^3.14.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"mongoose": "^5.4.0",
"oas-tools": "2.1.7",
"request-promise": "^4.2.6",
"uuid": "^3.4.0"
},
"devDependencies": {
"#babel/core": "^7.13.13",
"#babel/plugin-proposal-optional-chaining": "^7.13.12",
"#babel/preset-env": "^7.13.12",
"#babel/register": "^7.13.8",
"babel-loader": "^8.2.2",
"babel-polyfill": "^6.26.0",
"chai": "^4.3.4",
"eslint": "^6.8.0",
"husky": "^6.0.0",
"jest": "^26.6.3",
"mocha": "^6.2.3",
"nyc": "^14.1.1",
"prettier": "2.2.1",
"pretty-quick": "^3.1.0",
"swagger-parser": "^8.0.3"
}
}
Here is my babel.config.js file:
module.exports = {
presets: [["#babel/preset-env"]],
plugins: ["#babel/plugin-proposal-optional-chaining"],
sourceMaps: true
};
And finally, here is my launch.json file:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"env": {
"NODE_ENV": "development",
"AWS_PROFILE": "xxxxxx",
"PORT": "1171",
// "NO_CACHE": "true",
},
"name": "Launch DEV",
"outFiles": [
"${workspaceFolder}/compiled/**/*.js"
],
"program": "${workspaceFolder}/index.js",
"request": "launch",
"type": "node",
"sourceMaps": true
// "outputCapture": "std"
},
{
"env": {
"NODE_ENV": "qa",
"AWS_PROFILE": "xxxxxx",
"PORT": "1171",
// "NO_CACHE": "true",
},
"name": "Launch QA",
"outFiles": [
"${workspaceFolder}/compiled/**/*.js"
],
"program": "${workspaceFolder}/index.js",
"request": "launch",
"type": "node",
"sourceMaps": true
// "outputCapture": "std"
}
]
}
The only posts/questions on this problem that I've found are somewhat dated and aren't too helpful.
Here is what I've already looked at on this topic:
https://www.juandebravo.com/2019/05/20/debug-node-babel-docker/
https://github.com/microsoft/vscode/issues/103556
JavaScript Development in ES6 With Debugging
https://medium.com/#drcallaway/debugging-es6-in-visual-studio-code-4444db797954
Any help, or a solution to this problem would be greatly appreciated. Thanks in advance!

You have to generate source maps files. Their purpose is to map the source files to generated files, and they are being used by the debugger.
Do this by adding the devtool: 'source-map' setting to the configuration

How can I change package.json to have the newest version of axios?

Okay so my npm audit requires me to review this file manually and it apparently needs the newest version of axios(0.21.1) so how can I rebuild it?
This is the error btw:
Visit https://go.npm.me/audit-guide for additional guidance
High Server-Side Request Forgery
Package axios
Patched in >=0.21.1
Dependency of apify
Path apify > apify-client > axios
{
"_from": "axios#^0.20.0",
"_id": "axios#0.20.0",
"_inBundle": false,
"_integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
"_location": "/apify-client/axios",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "axios#^0.20.0",
"name": "axios",
"escapedName": "axios",
"rawSpec": "^0.20.0",
"saveSpec": null,
"fetchSpec": "^0.20.0"
},
"_requiredBy": [
"/apify-client"
],
"_resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
"_shasum": "057ba30f04884694993a8cd07fa394cff11c50bd",
"_spec": "axios#^0.20.0",
"_where": "C:\\Users\\Janek\\Desktop\\apify7\\my-new-project\\node_modules\\apify-client",
"author": {
"name": "Matt Zabriskie"
},
"browser": {
"./lib/adapters/http.js": "./lib/adapters/xhr.js"
},
"bugs": {
"url": "https://github.com/axios/axios/issues"
},
"bundleDependencies": false,
"bundlesize": [
{
"path": "./dist/axios.min.js",
"threshold": "5kB"
}
],
"dependencies": {
"follow-redirects": "^1.10.0"
},
"deprecated": "Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410",
"description": "Promise based HTTP client for the browser and node.js",
"devDependencies": {
"bundlesize": "^0.17.0",
"coveralls": "^3.0.0",
"es6-promise": "^4.2.4",
"grunt": "^1.0.2",
"grunt-banner": "^0.6.0",
"grunt-cli": "^1.2.0",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-eslint": "^20.1.0",
"grunt-karma": "^2.0.0",
"grunt-mocha-test": "^0.13.3",
"grunt-ts": "^6.0.0-beta.19",
"grunt-webpack": "^1.0.18",
"istanbul-instrumenter-loader": "^1.0.0",
"jasmine-core": "^2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1",
"karma-firefox-launcher": "^1.1.0",
"karma-jasmine": "^1.1.1",
"karma-jasmine-ajax": "^0.1.13",
"karma-opera-launcher": "^1.0.0",
"karma-safari-launcher": "^1.0.0",
"karma-sauce-launcher": "^1.2.0",
"karma-sinon": "^1.0.5",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"load-grunt-tasks": "^3.5.2",
"minimist": "^1.2.0",
"mocha": "^5.2.0",
"sinon": "^4.5.0",
"typescript": "^2.8.1",
"url-search-params": "^0.10.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"homepage": "https://github.com/axios/axios",
"jsdelivr": "dist/axios.min.js",
"keywords": [
"xhr",
"http",
"ajax",
"promise",
"node"
],
"license": "MIT",
"main": "index.js",
"name": "axios",
"repository": {
"type": "git",
"url": "git+https://github.com/axios/axios.git"
},
"scripts": {
"build": "NODE_ENV=production grunt build",
"coveralls": "cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
"examples": "node ./examples/server.js",
"fix": "eslint --fix lib/**/*.js",
"postversion": "git push && git push --tags",
"preversion": "npm test",
"start": "node ./sandbox/server.js",
"test": "grunt test && bundlesize",
"version": "npm run build && grunt version && git add -A dist && git add CHANGELOG.md bower.json package.json"
},
"typings": "./index.d.ts",
"unpkg": "dist/axios.min.js",
"version": "0.20.0"
}

You can just use the command npm install axios and it will automatically update axios and the package.json for you.

This worked for me:
$ npm uninstall axios
$ npm i axios --save

Electron-forge makes my windows setup file that runs application but does not install it

I've got an electron app set up using electron-forge. Once I make the desktop app using my windows machine, it generates a set up file that I can launch my app with. The problem is that it only launches the app and does not install it. Everytime I click on this setup file, it installs the app as if installing for the first time. This takes 8minutes to complete as I have a large amount of stored mp3 files.
I've tried running electron-forge make in the command line, but I'm not sure if I'm missing any other steps to make the file install. Here's my package.json in full:
{
"name": "myapp",
"productName": "my app",
"version": "0.0.1",
"description": "my very cool app",
"main": "src/index.js",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "eslint --cache --color --ext .jsx,.js src"
},
"keywords": [],
"author": "atlanteavila",
"license": "MIT",
"config": {
"forge": {
"make_targets": {
"win32": [
"squirrel"
]
},
"electronPackagerConfig": {
"packageManager": "yarn",
"icon": "public/images/app.ico"
},
"electronWinstallerConfig": {
"name": "my_app",
"icon": "public/images/app.ico"
},
"electronInstallerDebian": {},
"electronInstallerRedhat": {},
"github_repository": {
"owner": "atlanteavila",
"name": "Atlante Avila"
},
"windowsStoreConfig": {
"windowsStoreConfig": {
"packageName": "myapp",
"name": "My App"
}
}
}
},
"dependencies": {
"#material-ui/core": "^4.4.0",
"#material-ui/icons": "^4.2.1",
"electron-compile": "^6.4.4",
"electron-devtools-installer": "^2.1.0",
"electron-squirrel-startup": "^1.0.0",
"moment": "^2.24.0",
"nedb-promises": "^3.0.3",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-hot-loader": "^3.0.0-beta.6",
"react-motion": "^0.5.2",
"react-router-dom": "^4.3.1",
"react-transition-group": "^4.0.0",
"styled-components": "^4.2.0"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-es2015-classes": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"electron-forge": "^5.2.4",
"electron-prebuilt-compile": "4.0.0",
"eslint": "^3",
"eslint-config-airbnb": "^15",
"eslint-plugin-import": "^2",
"eslint-plugin-jsx-a11y": "^5",
"eslint-plugin-react": "^7"
}
}
I'm not sure if I need to add something to the electronWinstallerConfig? Any help is truly appreciated!

Angular-cli : Launch time is too slow

Need to improve my Angular2 application Launch time. At preset it's taking 10-12 seconds to launch.
There are multiple modules in the application and each modules are loaded using lazy loading.
Here's my package.json file
{
"name": "AppStore-cli",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.3.1",
"#angular/compiler": "2.3.1",
"#angular/core": "2.3.1",
"#angular/forms": "2.3.1",
"#angular/http": "2.3.1",
"#angular/material": "2.0.0-beta.1",
"#angular/platform-browser": "2.3.1",
"#angular/platform-browser-dynamic": "2.3.1",
"#angular/router": "3.3.1",
"#types/file-saver": "0.0.0",
"angular2-moment": "1.2.0",
"angular2-select": "1.0.0-beta.3",
"autotable": "1.0.0",
"core-js": "2.4.1",
"file-saver": "^1.3.3",
"jspdf": "1.3.2",
"jspdf-autotable": "2.3.1",
"md2": "0.0.16",
"ng2-auto-complete": "0.10.9",
"ng2-pagination": "2.0.0",
"ng2-slimscroll": "1.2.1",
"ng2-toastr": "1.4.1",
"rxjs": "5.0.1",
"ts-helpers": "1.1.1",
"zone.js": "0.7.2"
},
"devDependencies": {
"#angular/compiler-cli": "2.3.1",
"#types/file-saver": "0.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.0.2",
"karma-remap-istanbul": "0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "4.3.0",
"typescript": "~2.0.3"
}
}
angular-cli.json
{
"project": {
"version": "1.0.0-beta.28.3",
"name": "AppStore-cli"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico",
"./images/"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css",
"css/indigo-pink.css",
"css/admin.css",
"../node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
],
"scripts": [
"../node_modules/core-js/client/shim.min.js",
"../node_modules/reflect-metadata/Reflect.js",
"../node_modules/jspdf/dist/jspdf.min.js",
"../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
I'm using following command to make build
ng build --prod
Here's the screensort of the files generation after completion of build.
Here's the screensort of load time.
Can anybody help me with how i can reduce the launch time to 2-3 seconds or less than than?
Thanks

There are few thing you could do:
run ng build -prod -aot --stats-json
fix any error you might have (and rebuild)
install webpack-bundle-analyze npm install --save-dev webpack-bundle-analyzer
run webpack-bundle-analyzer dist/stats.json
look at your bundles and remove any unnecessary code
install compression (gzip) on your server (this alone should reduce vendor bundle to ~400kb)
If thing are still slow, look into server side rendering with universal, service and web workers... Google can help (;
Also consider upgrading to angular 4.0.0. It generates less code then 2.x.x.