We Keep Coding

NextJS - FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

I have the NextJS typescript application, with 30 pages and some dependencies. I am trying to build it on free instance which have 512MB memory but the build sometimes can't even finish the step of checking validity of types.
I am getting the error
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
here is package.json
{
"name": "app",
"scripts": {
"dev": "next dev",
"build": "NODE_OPTIONS=\" --max-old-space-size=512\" next build",
"prestart": "npm run build",
"start": "NODE_OPTIONS=\"--max-old-space-size=512\" next start","test": "start-server-and-test dev 3000 cypress:open",
"type:check": "yarn tsc --project tsconfig.json --pretty --noEmit",
"prepare": "husky install"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.3.0",
"#fortawesome/free-regular-svg-icons": "^6.0.0",
"#fortawesome/free-solid-svg-icons": "^6.0.0",
"#fortawesome/react-fontawesome": "^0.1.17",
"#lexical/react": "^0.7.1",
"#reduxjs/toolkit": "^1.7.2",
"#tangdw/react-viewer": "^3.2.7",
"antd": "^4.18.8",
"antd-dayjs-webpack-plugin": "^1.0.6",
"autoprefixer": "^10.4.7",
"bootstrap": "5.1.3",
"country-list": "^2.2.0",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"formik": "^2.2.9",
"formik-antd": "^2.0.4",
"html-to-draftjs": "^1.5.0",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"next": "12.0.10",
"next-pwa": "^5.6.0",
"nprogress": "^0.2.0",
"postcss": "^8.4.14",
"query-string": "^7.1.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "^1.15.0",
"react-feather": "^2.0.10",
"react-icons": "^4.3.1",
"react-multi-carousel": "^2.8.0",
"react-redux": "^7.2.6",
"react-share": "^4.4.1",
"react-show-more-text": "^1.5.2",
"react-slick": "^0.29.0",
"react-typical": "^0.1.3",
"react-viewer": "^3.2.2",
"tailwindcss": "^3.0.24",
"yup": "^0.32.11"
},
"devDependencies": {
"#types/node": "17.0.15",
"#types/react": "17.0.39",
"#types/react-show-more-text": "^1.4.2",
"#typescript-eslint/eslint-plugin": "^5.11.0",
"#typescript-eslint/parser": "^5.11.0",
"#types/jsonwebtoken": "^8.5.8",
"#types/nprogress": "^0.2.0",
"#types/react-typical": "^0.1.0",
"cypress": "^9.5.1",
"eslint": "8.8.0",
"eslint-config-next": "12.0.10",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"husky": ">=6",
"lint-staged": ">=10",
"miragejs": "^0.1.43",
"prettier": "2.5.1",
"start-server-and-test": "^1.14.0",
"typescript": "4.5.5"
},
}
Is there a way to handle that?

Another option is make the build locally and upload the build files manually to the server.
I used to do this on my server.

Looks like just not enough memory.
Recently I faced with memory issues during build on VPS with 8GB RAM. But there was several projects. So I can recommend to buy a more powerful instance.
512 MB probably not enough for 30 pages.

Syntax Error in module.js - Application is blank in IE & Egde

I've made an application in Meteor using React. When it runs on Chrome everything works fine and there is no problem. But when i open it in IE or Edge it's just total blank. I think it has something to do with ES2015+ but I can't find the root problem.
As you can see on the image here, it just says "Syntax error in module.js" And afterward a lot of meteor Install is not defined. Error syntax error
Here is my package.json file
"dependencies": {
"#babel/runtime": "^7.0.0-beta.51",
"#cleverbeagle/seeder": "^1.3.1",
"#fortawesome/fontawesome": "^1.1.1",
"#fortawesome/fontawesome-free-brands": "^5.0.12",
"#fortawesome/fontawesome-pro-light": "^5.0.3",
"#fortawesome/fontawesome-pro-regular": "^5.0.3",
"#fortawesome/fontawesome-pro-solid": "^5.0.3",
"#fortawesome/react-fontawesome": "0.0.17",
"#okgrow/auto-analytics": "^2.0.0",
"babel-runtime": "^6.26.0",
"bcrypt": "^1.0.3",
"commonmark": "^0.28.1",
"cordova": "^8.0.0",
"cordova-plugin-splashscreen": "^5.0.1",
"cordova-plugin-statusbar": "^2.4.1",
"core-js": "^2.5.1",
"handlebars": "^4.0.11",
"hide-virtual-keyboard": "^1.0.1",
"ios-sim": "^6.1.2",
"jquery": "^2.2.4",
"jquery-validation": "^1.17.0",
"juice": "^4.2.2",
"lodash": "^4.17.4",
"meteor-node-stubs": "^0.3.2",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"parse-google-place": "^1.1.0",
"prop-types": "^15.6.0",
"query-string": "^6.0.0",
"react": "^16.2.0",
"react-addons-pure-render-mixin": "^15.6.2",
"react-autosuggest": "^9.3.4",
"react-bootstrap": "^0.31.5",
"react-bootstrap-slider": "^2.1.3",
"react-copy-to-clipboard": "^5.0.1",
"react-day-picker": "^7.0.5",
"react-dom": "^16.2.0",
"react-google-maps": "^9.4.3",
"react-helmet": "^5.2.0",
"react-intl": "^2.4.0",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-share": "^2.1.1",
"react-slick": "^0.23.1",
"react-swipeable": "^4.2.0",
"simpl-schema": "^0.3.2",
"underscore": "^1.8.3"
},
And this is my packages in Meteor:
meteor-base#1.4.0 # Packages every Meteor app needs to have
mobile-experience#1.0.5 # Packages for a great mobile UX
mongo#1.5.0 # The database Meteor supports right now
reactive-var#1.0.11 # Reactive variable for tracker
tracker#1.2.0 # Meteor's client-side reactive programming library
standard-minifier-css#1.4.1 # CSS minifier run for production mode
standard-minifier-js#2.3.4 # JS minifier run for production mode
es5-shim#4.8.0 # ECMAScript 5 compatibility for older browsers.
ecmascript#0.11.1 # Enable ECMAScript2015+ syntax in app code
shell-server#0.3.1 # Server-side component of the `meteor shell` command
react-meteor-data
alanning:roles
fourseven:scss
twbs:bootstrap
accounts-base#1.4.2
accounts-password#1.5.1
service-configuration#1.0.11
themeteorchef:bert
fortawesome:fontawesome
aldeed:collection2-core#2.0.1
audit-argument-checks#1.0.7
ddp-rate-limiter#1.0.7
dynamic-import#0.4.0
static-html
mdg:seo
universe:i18n
reywood:publish-composite
mdg:meteor-apm-agent
underscore#1.0.10
mdg:geolocation
btafel:accounts-facebook-cordova
Anything had same issue? I'm running on Meteor version 1.7.0.3
Thanks in advance.

ES6 - Import modules from project root directory (babel/node/npm)

Before I continue, I have tried the following solutions:
Git: Babel plugin root import package: Plugin doesn't seem to work alongside jest
SO: Configuring for babel jest
SO: Create own babel plugin
Webpack aliasing is another solution however we don't use webpack
A project was handed over to me recently which utilizes relative import statements that can get pretty long and obscure (e.g. import * as stuff from '../../../../../utilities/stuff'). I'd like to simplify our import statements using the project's root directory in this fashion: import * as stuff from '~/utilities/stuff.
My understanding of the packages, dependencies and configurations is still in its infancy. It looks like we use babel for transpiling, however I don't see a core babel package - only babel-jest and babel-polyfill.
Here is our package.json:
{
"name": "placeholder",
"version": "0.1.0",
"private": true,
"dependencies": {
"animejs": "^2.2.0",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.5",
"html-to-react": "^1.3.0",
"htmlparser2-react": "0.0.4",
"js-csp": "^1.0.1",
"npm-run-all": "^4.1.1",
"prop-types": "^15.5.10",
"react": "^16.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-aria-menubutton": "^5.0.2",
"react-dnd": "^2.5.1",
"react-dnd-html5-backend": "^2.5.1",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-rte": "^0.11.0",
"react-sidebar": "^2.3.2",
"react-toasts": "^1.2.3",
"react-transition-group": "^2.2.0",
"react-virtualized": "^9.9.0",
"redux": "^3.7.2",
"redux-form": "^6.8.0",
"sweetalert": "^2.0.8",
"text-spinners": "^1.0.5",
"uuid": "^3.1.0"
},
"devDependencies": {
"babel-jest": "^20.0.3",
"enzyme": "^2.9.1",
"jest-enzyme": "^3.8.2",
"materialize-css": "^0.100.2",
"moment": "^2.18.1",
"node-sass": "^4.5.3",
"node-sass-chokidar": "0.0.3",
"node-sass-magic-importer": "^5.0.0-alpha.6",
"react-docgen": "^2.18.0",
"react-scripts": "1.0.13",
"react-styleguidist": "^6.0.24",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.3.0",
"xhr-mock": "^1.9.1"
}
}
And .babelrc
{
"presets": ["react-app"],
"sourceMaps": true,
"retainLines": true
}
Our directory structure is as follows: <rootDir>/src where all js/jsx source files are contained within 'src'. This is the directory I'd like to configure to be the root (represented by a tilda (~)). Help would be greatly appreciated!

Why are packages in my yarn.lock but not in my package.json?

I started this project with create-react-app and then ejected. I'm currently analyzing my webpack bundle and I get this.
I ran this command to analyze my bundle -
source-map-explorer main.<hash>.js main.<hash>.js.map
I have a couple of questions -
I use moment.js in my application, however when looking at my package.json, it is not there. It does exist in my yarn.lock. Why is this happening? Why does my application even work?
I use lodash, but I have taken care to import specific lodash functions (import map from "lodash/map", for example). However, I see lodash in my node_module..despite never having imported it. Why is this working? Is it because a dependency of mine has a dependency on the whole lodash package and I'm just getting lucky?
How do I get source-map-explorer to analyze my production build? I tried the steps in the CRA documentation, but they error.
Why is the above happening?
For full reference here is my package.json's dependencies/devDependencies.
{
"dependencies": {
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-react-app": "^3.1.0",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"cross-env": "5.1.4",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.0.1",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"query-string": "^5.1.0",
"raf": "3.4.0",
"react": "^16.2.0",
"react-collapse": "^4.0.3",
"react-countdown-now": "^1.3.0",
"react-dev-utils": "^4.2.1",
"react-dom": "^16.2.0",
"react-grecaptcha": "^1.2.5",
"react-md-spinner": "^0.2.5",
"react-motion": "^0.5.2",
"react-player": "^1.1.1",
"react-redux": "^5.0.6",
"react-responsive": "^4.0.3",
"react-router-dom": "^4.2.2",
"react-router-hash-link": "^1.2.0",
"react-select": "^1.2.1",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3",
"xelpmoc-core": "^0.3.1"
},
"devDependencies": {
"compression-webpack-plugin": "^1.1.3",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.14.0",
"eslint-config-recommended": "^2.0.0",
"eslint-plugin-react": "^7.5.1",
"google-map-react": "^0.34.0",
"husky": "^0.14.3",
"lint-staged": "^6.0.0",
"pm2": "^2.9.1",
"prettier": "^1.9.2",
"redux-mock-store": "^1.4.0"
},
}

yarn.lock is a "lockfile" which locks down your dependency tree so that when another teammate (or CI server) runs the build it gets the same dependencies (and thus the same build). The lockfile lists not just dependencies but deps of deps.
NPM/yarn flattens dependencies in node_modules when possible so you probably have some dependencies which are installing lodash/moment. You can debug this by running npm ls lodash to see where it's coming from. You should definitely install those packages that you are using but you've gotten "by accident".
I can't answer #3

Is Crypto-Browserify and Browserify-Zib necessary when Bunlding with Browserify?

I used browserify to bundle my code, and it works fine. But the bundle size is very large. I used disc to check the bundle size and found that Crypto-Browserify and Browserify-Zib takes up almost half of the size. I'm pretty sure I did not require them in my code, and here is my package.json, which doesn't look like they use the two libraries too. Any idea?
"devDependencies": {
"bower-files": "^3.11.3",
"browser-sync": "^2.11.1",
"browserify": "^13.0.0",
"browserify-shim": "^3.8.12",
"clamp-js": "^0.7.0",
"gulp": "^3.9.0",
"gulp-clean": "^0.3.1",
"gulp-concat": "^2.6.0",
"gulp-eslint": "^1.1.1",
"gulp-minify-css": "^1.2.3",
"gulp-rev": "^6.0.1",
"gulp-sass": "^2.1.1",
"gulp-scss-lint": "^0.3.9",
"gulp-sync": "^0.1.4",
"gulp-tmod": "^1.0.3",
"gulp-uglifyjs": "^0.6.2",
"jquery": "^2.2.0",
"jquery-lazyload": "^1.9.7",
"jquery-qrcode": "^1.0.0",
"moment": "^2.11.1",
"raven": "^0.10.0",
"vinyl-source-stream": "^1.1.0",
"zeptojs": "^1.1.4"
},