Develop Reference

ESLint works in one VSCode project but not another

I have the ESLint installed globally in VSCode. In one of my React projects it is working. Later, I created a React Native projects using Expo and it isn't running there.
I saw that I had the following settings in my packages.json file for my React project:
"dependencies": {
"#next/font": "13.1.1",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
"next": "13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0"
}
I copied the
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
lines into my React Native project like so:
"dependencies": {
"expo": "~47.0.12",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-native": "0.70.5",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1"
},
but it still doesn't work, even after closing and reopening my React Native project.
I came across ESLint not working in VS Code?
I've tried running eslint in a terminal in VSCode, but I get the following error in both my React and React Native projects.
C:\Users\myuser\source\globomantics> eslint
eslint : The term 'eslint' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included,
verify that the path is correct and try again.
At line:1 char:1
+ eslint
+ ~~~~~~
+ CategoryInfo : ObjectNotFound: (eslint:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException

How to reduce NextJs bundle size?

I've just created my NextJS app, and the first load bundle size is about 1.5Mb. This is my first time using Nextjs, and from what I understand 1.2Mb is incredibly massive. I've attached an image of the yarn build and also of my package.json.
All pages in my app query from a database, and right now the pages are rendering as static html.
I've tried all the basic stuff, such as using ES6 imports(for components rendered conditionally), but none of that is working. I believe that the issue lies in that all my pages are first fetching data from the database (if I'm wrong please correct me), however I'm not too sure how to fix that.
I know I can fetch data directly from front end using useEffect, however I don't know if that will reduce the build size.
If someone has experience with NextJs, I'd really appreciate it if they could look at my project and let me know where I'm going wrong.
Thanks!
PACKAGE.JSON
"dependencies": {
"#chakra-ui/react": "^2.3.6",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#next/bundle-analyzer": "^13.0.2",
"dotenv": "^16.0.3",
"framer-motion": "^7.6.5",
"moralis-v1": "^1.11.0",
"next": "latest",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-moralis": "^1.4.2",
"react-redux": "^8.0.4",
"web3uikit": "^0.1.159"
},
"devDependencies": {
"#types/node": "17.0.35",
"#types/react": "18.0.9",
"#types/react-dom": "18.0.5",
"autoprefixer": "^10.4.7",
"file-loader": "^6.2.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.2",
"typescript": "4.7.2",
"url-loader": "^4.1.1"
}
}
Bundle:

The problem seems to be in _app.js. This file is shared by all other files and it's 1.03MB. So something in there is going wrong. You have to post the contents of that file to find the problem

Angular v2.0.0 vs v5.1.2

Does Angular 2 differ a lot, in terms of syntax, from angular 5?
I'm asking because I got on Christmas pretty new book (published at the end of November) about Angular 2 and when I wanted to install required packages via npm, it automatically installed version 5.1.2 of angular, when the book is basing on version 2.0.0.
I wonder if I will be able to normally carry out the examples from the book, or maybe should I downgrade to version 2.0.0?
Actually I don't know if it's a topic for this forum, but I would be very if anybody could answer me.
{
"name": "angular-template",
"version": "1.0.0",
"description": "Template for angular app",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"#angular/common": "^5.1.2",
"#angular/compiler": "^5.1.2",
"#angular/core": "^5.1.2",
"#angular/forms": "^5.1.2",
"#angular/http": "^5.1.2",
"#angular/platform-browser": "^5.1.2",
"#angular/platform-browser-dynamic": "^5.1.2",
"#angular/router": "^5.1.2",
"core-js": "^2.5.3",
"systemjs": "^0.20.19",
"rxjs": "^5.5.6",
"zone.js": "^0.8.18",
"bootstrap": "^3.3.7",
"jquery": "^3.2.1"
},
"devDependencies": {
"typescript": "^2.6.2",
"live-server": "^1.2.0"
}
}

Angular team keep enhancing angular more and more. its started with angular 2.0.0 and today the latest stable release is 7.0.0 (2018-10-18).
So if you want to know each change that is added after each version, you can look at this change log file link:
https://github.com/angular/angular/blob/master/CHANGELOG.md
This way you can for example know what is removed and what feature is added in each version.
You can keep use your book, its probably a good source to learn with, but you can search in that change log file for example to see if a feature is removed or not and use the new one.
So angular 5 (5.1.2 here) is better than angular 2 because it has added many new features and many fixes that angular 2 or 4. and still under development to bring better API and bug fixes and optimizations every new release.

ZoneAwarePromise has been overwritten on Meteor

On Meteor 1.4.1.1 since I've updated to the latest Angular 2.0.1 release I struggle against this error: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten
I've tried meteor update and meteor reset but the error is still there.
I've looked for some answers saying that I should load Zone.js after every other scripts. The problem is that I can't control the loading order on Meteor.
Here is my package.json dependencies:
"dependencies": {
"#angular/common": "^2.0.1",
"#angular/compiler": "^2.0.1",
"#angular/core": "^2.0.1",
"#angular/forms": "^2.0.1",
"#angular/platform-browser": "^2.0.1",
"#angular/platform-browser-dynamic": "^2.0.1",
"angular2": "^2.0.0-beta.17",
"angular2-meteor": "^0.7.0",
"angular2-meteor-polyfills": "^0.1.1",
"bcrypt": "^0.8.7",
"bluebird": "^3.4.6",
"chart.js": "^2.3.0",
"es6-shim": "^0.35.1",
"meteor-node-stubs": "^0.2.3",
"reflect-metadata": "^0.1.2",
"rxjs": "^5.0.0-beta.12",
"ui-router-ng2": "^1.0.0-beta.3",
"zone.js": "^0.6.25"
}
and here are my meteor packages:
meteor-base#1.0.4 # Packages every Meteor app needs to have
mobile-experience#1.0.4 # Packages for a great mobile UX
mongo#1.1.12 # The database Meteor supports right now
reactive-var#1.0.10 # Reactive variable for tracker
jquery#1.11.9 # Helpful client-side library
tracker#1.1.0 # Meteor's client-side reactive programming library
standard-minifier-css#1.2.0 # CSS minifier run for production mode
es5-shim#4.6.14 # ECMAScript 5 compatibility for older browsers.
ecmascript#0.5.8 # Enable ECMAScript2015+ syntax in app code
angular2-compilers#0.6.2_1
barbatus:angular2-runtime
deanius:promise
momentjs:moment
fortawesome:fontawesome
dburles:collection-helpers
accounts-password#1.3.0
promise#0.8.4
meteorhacks:ssr
email#1.1.17
jalik:ufs
jalik:ufs-local
service-configuration#1.0.10
accounts-facebook#1.0.10
accounts-google#1.0.10
accounts-twitter#1.1.11
percolate:synced-cron
shell-server`
Any ideas ?

Promise coming from zone.js is beeing overwritten by promise package which is a dependency of ecmascript and deanius:promise.
You need to remove ecmascript and use typescript everywhere (client AND server)

This worked for me.
meteor remove barbatus:angular2-runtime
meteor remove barbatus:angular2-polyfills
and/or this
npm uninstall barbatus:angular2-runtime
npm uninstall barbatus:angular2-polyfills
As described here by Richie 765:
https://github.com/Urigo/angular2-meteor/issues/413
I found out that both barbatus:angular2-runtime and barbatus:angular2-polyfills are incompatible with ecmascript. So I uninstalled them. By the way, is barbatus:angular2-runtime still used for anything? It seems it has been removed from the repo so I think there's no use for it anyway. In my project first thing I import is
import 'angular2-meteor-polyfills';
Doesn't have to be in every file, just as the first import in the file that is loaded first. /client/main.js would be a good place.

Why is global.Rx undefined when RxJs is linked to via script tag?

I am setting up an AngularJS 2 app that is bundled using webpack. The output is currently 2 files: app.bundle.js and vendor.bundle.js. The vendor.bundle.js contains my 3rd party dependencies and is around 1.8 MB currently (unminified). The dependencies in my package.json are given below.
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.1",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"
},
1.8 MB seems really big to me and would have a significant impact on the user experience as the app will only load for the user after several MB of data have been downloaded. For this reason I want to externalise my 3rd party dependencies to CDN URLs.
However, AngularJS 2.0.0-RC.1 files are not currently available on any CDN that I looked up (I tried cdnjs and Google). As an interim measure I thought I could just link to the bundled JS files in my node_modules directory, like so:
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.28/system.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.28/system-polyfills.src.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/#angular/core/core.umd.js"></script>
I'm assuming these are the correct files to link to - particularly the core.umd.js. The structure in node_modules between 2.0.0-beta.17 and 2.0.0-RC.1 seems radically different, so whatever examples I could find on Google appear to no longer apply.
Also, I couldn't find angular2-polyfills in the RC package but without it the browser reported various errors, so I had to link to the beta-17 version. Is there a reason why it doesn't exist in RC?
The problem I'm left with is that global.Rx is undefined. I can see that global is set to the window object but Rx is undefined on it. What am I doing wrong?
In general, is it advisable to externalise all 3rd party dependencies to reduce overhead and take advantage of browser-caching of CDN-resources, or is it better to take the hit and just bundle them into your app so that dependency management is a bit cleaner and the window object isn't polluted?