Develop Reference

AsyncStorage has been extracted from react-native core and will be removed in a future release

I don't know why I'm getting this warning message. I using #react-native-async-storage/async-storage.
Is there a way to fix it, without ignoring with YellowBox.
The warning message goes away when I remove the firebase config code
Warning Message:
AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '#react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage
Package.json
dependencies": {
"#react-native-async-storage/async-storage": "^1.15.11",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.11",
"firebase": "^9.4.0",
"react": "17.0.2",
"react-native": "0.66.1",
"react-native-fast-image": "^8.5.11",
"react-native-gesture-handler": "^1.10.3",
"react-native-linear-gradient": "^2.5.6",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.8.0",
"react-native-vector-icons": "^8.1.0"
},

NextJS SCRIPT1028 - caused by destructuring in object in Edge

I know there is topic on why this error occurs on here. My question is how to fix it in the NextJS environment and babel to produce chunks that don't include the spread operator in an object. Here is the background.
I need to support Edge18 where the spread operator is not supported in object destructing. It produces the error:
SCRIPT1028: SCRIPT1028: Expected identifier, string or number
The error is caused by this line:
filter(e=>"0"!==t[e]).reduce((e,r)=>({...e,[`-${r}`]:(0,f.default
And in particular the ...e
This code is in a NextJS chunk loaded via
<script src="/_next/static/chunks/269073627ff2c2dabb405b46af9d15fd8bf75a34.ed77311839e33222ab61.js" async=""></script>
How do I update the babel config to stop using the spread operator (ES2018) in an object? I am using typescript but the tsConfig target is ES5. I checked the browserslist per the Babel documentation for #babel/preset-env which links to browserslist and recommends using npx browserslist to see the target browsers for a project and Edge 18 is in there.
I do have a custom babel config per the docs here which follows the docs:
{
"presets": ["next/babel"],
"plugins": []
}
which has an added plugin that configures Styled Components for SSR. That's the only change. I appreciate any pointers in how to get NextJS to produce Chunks that don't contain the spread operator in an object or targets less than ES2018.
Edit: Here is package.json
"dependencies": {
"#apollo/client": "3.0.0-beta.50",
"#apollo/link-context": "^2.0.0-beta.3",
"#apollo/react-ssr": "^4.0.0-beta.1",
"#next/bundle-analyzer": "^9.4.4",
"#sentry/browser": "^5.15.5",
"#sentry/node": "^5.15.5",
"#zeit/next-source-maps": "0.0.3",
"downloadjs": "^1.4.7",
"framer-motion": "^1.11.0",
"geolib": "^3.3.1",
"geomagnetism": "^0.1.0",
"graphql": "^14.6.0",
"html-to-image": "^0.1.1",
"import": "0.0.6",
"leaflet": "^1.6.0",
"local-storage": "^2.0.0",
"lodash": "^4.17.15",
"mgrs": "^1.0.0",
"next": "^9.4.4",
"postcss-flexbugs-fixes": "^4.2.1",
"react": "0.0.0-experimental-33c3af284",
"react-dom": "0.0.0-experimental-33c3af284",
"react-icons": "^3.10.0",
"react-leaflet": "^2.7.0",
"react-spinners": "^0.8.3",
"react-transition-group": "^4.4.1",
"styled-components": "^5.1.1",
"uuid": "^7.0.3"
},
"devDependencies": {
"#graphql-codegen/add": "^1.15.0",
"#graphql-codegen/cli": "^1.15.0",
"#graphql-codegen/typescript": "^1.15.0",
"#graphql-codegen/typescript-operations": "^1.15.0",
"#graphql-codegen/typescript-react-apollo": "^1.15.0",
"#graphql-codegen/typescript-resolvers": "^1.15.0",
"#sentry/webpack-plugin": "^1.11.1",
"#types/downloadjs": "^1.4.2",
"#types/little-loader": "^0.2.0",
"#types/local-storage": "^1.4.0",
"#types/lodash": "^4.14.154",
"#types/node": "^14.0.6",
"#types/react": "^16.9.35",
"#types/react-dom": "^16.9.8",
"#types/react-leaflet": "^2.5.1",
"#types/react-transition-group": "~4.2.4",
"#types/styled-components": "^5.1.0",
"#types/styled-jsx": "^2.2.8",
"#types/uuid": "^7.0.3",
"#typescript-eslint/eslint-plugin": "^3.0.2",
"#typescript-eslint/parser": "^3.0.2",
"babel-eslint": "^10.1.0",
"eslint": "^7.1.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.4",
"mapkit-typescript": "^5.18.2",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.0.5",
"tailwindcss": "^1.4.6",
"typescript": "^3.9.3"
}
Edit 2: Here is the package analyzer of the package the chunk that is causing the issue (chunk ID is different because it's from development - same code found in here though)
Edit 3: I think the issue was tailwindcss. If I do the accepted solutions answer for tailwindcss an es-check es-check es6 'out/_next/static/chunks/*.js' returns the node_modules chunk as es6 compliant. If I then remove the transpire from the config, it marks the chunk as non es6 compliant at the same code that was erring in original post.

One of your dependencies is not using ES5-compliant code for older browsers and will need to be transpiled.
You need to narrow which dependency is producing this code and transpile it using babel. This dependency can be the result of a sub-dependency to a main dependency, so you may have to traverse the entire dependency tree all the way down to find the culprit. A simple example would be: #nivo is a React charting package that has a sub-dependency called d3-scale which dropped support for IE11 and can't be polyfilled, therefore it needs to be transpiled by babel to work in IE11:
next.config.js
module.exports = {
webpack(config, { defaultLoaders, isServer }) {
/* adds a custom Webpack rule for babel to transpile d3-scale */
config.module.rules.push({
test: /\.js$/,
loader: defaultLoaders.babel,
include: /[\\/]node_modules[\\/](d3-scale)[\\/]/,
});
/* return new config to next */
return config;
}
};
Alternatively, you can use the next-transpile-modules package that does the same thing as the above.

How to solve Module not found: Can't resolve '#babel/runtime/core-js/map' in Material-UI

I am using Material UI for React, I updated the Material-UI to the latest version and it is giving me following error
../node_modules/material-ui/styles/withStyles.js
Module not found: Can't resolve '#babel/runtime/core-js/map' in
'C:\Users\User\Documents\code\react\node_modules\material-ui\styles'
I downgraded to the previous version of the Material-UI as well, worked around with installing the correct version of babel as well but still having the same issue.
Here is my package.json
"dependencies": {
"#babel/runtime": "^7.4.0",
"#material-ui/core": "^4.1.3",
"#material-ui/icons": "^3.0.2",
"#material-ui/lab": "^3.0.0-alpha.30",
"axios": "^0.18.1",
"bootstrap": "^4.3.1",
"material-auto-rotating-carousel": "^3.0.1",
"material-auto-rotating-carousel-refurb": "^1.0.1",
"react": "^16.8.6",
"react-animated-slider": "^1.1.4",
"react-bootstrap": "^0.32.4",
"react-dom": "^16.8.6",
"react-motion": "^0.5.2",
"react-responsive-carousel": "^3.1.49",
"react-router": "^3.2.3",
"react-scripts": "2.1.2",
"react-slick": "^0.23.2",
"react-swipeable-views": "^0.13.3",
"react-tap-event-plugin": "^1.0.0",
"slick-carousel": "^1.8.1"
}

I figured this issue out by adding a resolution in my package.json, but it only will work if you use yarn instead of npm.
my fix (if you use yarn)
// in your package.json
...
"resolutions": {
"material-ui/#babel/runtime": "7.0.0-beta.42"
}
...
Why does it work?, because #babel/runtime": "7.0.0-beta.42 still requires core-js as a dependency, in specific it requires core-js ^2.5.3
Alternative fix
If you are not using yarn and rather npm, you can add #babel/runtime": "7.0.0-beta.42 as a devDependency and it should be work fine as well.
I left the link to yarn resolutions, because it might be interesting for you.

Unable to find local grunt in my meanjs existing project on mac

I want to run the meanjs existing project that I got from my friend in my mac pc but when I run the 'grunt' command then following error is getting:
grunt-cli: The grunt command line interface. (v0.1.13)
Fatal error: Unable to find local grunt.
after searching google I have used these two command below:
sudo npm install grunt --save-dev
npm install
but following errors are getting:
Loading "gruntfile.js" tasks...ERROR
>> Error: Cannot find module 'load-grunt-tasks'
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
[NB: but grunt is working for the newly created meanjs project on my local mac but not for this old project from my friend]
Updated - I have the the package.json file here:
{
"name": "meanjsapp",
"description": "Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.js",
"version": "0.0.1",
"engines": {
"node": "0.10.x",
"npm": "1.4.x"
},
"scripts": {
"start": "grunt",
"test": "grunt test",
"postinstall": "bower install --config.interactive=false"
},
"dependencies": {
"apn": "^1.7.4",
"async": "~0.9.0",
"body-parser": "~1.9.0",
"bower": "~1.3.8",
"chalk": "~0.5",
"compression": "~1.2.0",
"connect-flash": "~0.1.1",
"connect-mongo": "~0.4.1",
"consolidate": "~0.10.0",
"cookie-parser": "~1.3.2",
"cron": "^1.0.9",
"express": "~4.10.1",
"express-session": "~1.9.1",
"forever": "~0.11.0",
"glob": "~4.0.5",
"grunt-cli": "~0.1.13",
"helmet": "~0.5.0",
"jsonwebtoken": "^5.0.2",
"jwt-simple": "^0.3.0",
"lodash": "~2.4.1",
"method-override": "~2.3.0",
"mongoose": "~3.8.8",
"morgan": "~1.4.1",
"multer": "^0.1.8",
"nodemailer": "~1.3.0",
"passport": "~0.2.0",
"passport-facebook": "~1.0.2",
"passport-github": "~0.1.5",
"passport-google-oauth": "~0.1.5",
"passport-linkedin": "~0.1.3",
"passport-local": "~1.0.0",
"passport-twitter": "~1.0.2",
"swig": "~1.4.1"
},
"devDependencies": {
"supertest": "~0.14.0",
"should": "~4.1.0",
"grunt-env": "~0.4.1",
"grunt-node-inspector": "~0.1.3",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-csslint": "^0.3.1",
"grunt-ng-annotate": "~0.4.0",
"grunt-contrib-uglify": "~0.6.0",
"grunt-contrib-cssmin": "~0.10.0",
"grunt-nodemon": "~0.3.0",
"grunt-concurrent": "~1.0.0",
"grunt-mocha-test": "~0.12.1",
"grunt-karma": "~0.9.0",
"load-grunt-tasks": "~1.0.0",
"karma": "~0.12.0",
"karma-jasmine": "~0.2.1",
"karma-coverage": "~0.2.0",
"karma-chrome-launcher": "~0.1.2",
"karma-firefox-launcher": "~0.1.3",
"karma-phantomjs-launcher": "~0.1.2"
}
}
Can anybody help me?

A Node.js project, if used with npm, must come with a package.json file.
The package.json ( https://docs.npmjs.com/files/package.json ) file contains all the infos about the project, even the dependencies (which are added with the --save).
So if your friend did everything right you have just to run npm install and should install all the dependencies. If there's no package.json file or if there are no dependencies written on it, you have to install them manually.
grunt has many modules to work, and one of those is called load-grunt-tasks so you should run again npm install load-grunt-tasks --save-dev of course this is just if you do not have the dependencies in the file.

Heroku Deploy Error: Cannot get Node App running after Deploy : Cannot find module '/app/web.js'

I have a node.js app using Express and MongoDB (mongoose). It runs perfectly fine locally. I deployed it to heroku seemingly without a problem, but when I try to actually launch the app it crashes. The heroku log says this: Error: Cannot find module '/app/web.js'
I am new to this, so any help would be greatly appreciated. Thanks! App will help my Type 1 Diabetic daughter.
package.json:
{
"name": "projectglu",
"version": "0.0.0",
"dependencies": {
"express": "~3.4.3",
"lodash": "~2.4.1",
"mongoose": "~3.8.8",
"connect-mongo": "~0.4.0",
"passport": "~0.2.0",
"passport-local": "~0.1.6",
"ejs": "~0.8.4"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-autoprefixer": "~0.4.0",
"grunt-bower-install": "~0.7.0",
"grunt-concurrent": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-coffee": "~0.7.0",
"grunt-contrib-compass": "~0.6.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-cssmin": "~0.7.0",
"grunt-contrib-htmlmin": "~0.1.3",
"grunt-contrib-imagemin": "~0.5.0",
"grunt-contrib-jshint": "~0.7.1",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-watch": "~0.5.2",
"grunt-google-cdn": "~0.2.0",
"grunt-newer": "~0.5.4",
"grunt-ngmin": "~0.0.2",
"grunt-rev": "~0.1.0",
"grunt-svgmin": "~0.2.0",
"grunt-usemin": "~2.0.0",
"jshint-stylish": "~0.1.3",
"load-grunt-tasks": "~0.2.0",
"time-grunt": "~0.2.1",
"grunt-express-server": "~0.4.5",
"grunt-open": "~0.2.0",
"connect-livereload": "~0.3.0",
"karma-ng-scenario": "~0.1.0",
"grunt-karma": "~0.6.2",
"karma-firefox-launcher": "~0.1.3",
"karma-script-launcher": "~0.1.0",
"karma-html2js-preprocessor": "~0.1.0",
"karma-jasmine": "~0.1.5",
"karma-chrome-launcher": "~0.1.2",
"requirejs": "~2.1.10",
"karma-requirejs": "~0.2.1",
"karma-coffee-preprocessor": "~0.1.2",
"karma-phantomjs-launcher": "~0.1.1",
"karma": "~0.10.9",
"karma-ng-html2js-preprocessor": "~0.1.0",
"grunt-mocha-test": "~0.8.1",
"supertest": "~0.8.2",
"should": "~2.1.0",
"grunt-env": "~0.4.1",
"grunt-node-inspector": "~0.1.3",
"grunt-nodemon": "~0.2.0",
"open": "~0.0.4"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"test": "grunt test"
}
}

More clearly the problem may be when you create the Procfile from Heroku website example you are cutting and pasting "web: node web.js" which basically tells heroku which file is your entry point. You probably have a different entry point like say .. server.js so swap out "web: node web.js" with "web: node server.js" to solve your problem.

There is a variety of issues that can be causing this.
Please check that you have added your 'Procfile'.Use a Procfile, a text file in the root directory of your application, to explicitly declare what command should be executed to start a web dyno. In this case, you simply need to execute the Node script using node.
Here’s an example Procfile:
web: node web.js
Another culprit could be a misconfigured environment variable, NODE_ENV. Personally, commanding Heroku to set NODE_ENV=production helped me resolved a Cannot find module error I experienced. When you do this replace myapp with your Heroku app name.
heroku labs:enable user-env-compile -a myapp
heroku config:set NODE_ENV=production
If this fails to solve your issue move the packages declared in devDependencies over to dependencies just to mitigate the NODE_ENV issue.