App crashes on AsyncStorage and/or NetInfo import - node.js

Enviroment
React Native CLI 0.63.2
Windows 10 x64 bit
Node v14.4.0
Packages (package.json):
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.30",
"#fortawesome/free-solid-svg-icons": "^5.14.0",
"#fortawesome/react-native-fontawesome": "^0.2.5",
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/blur": "^3.6.0",
"#react-native-community/datetimepicker": "^3.0.4",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/netinfo": "^5.9.7",
"#react-native-community/picker": "^1.8.1",
"#react-native-firebase/app": "^8.4.6",
"#react-navigation/native": "^5.7.1",
"#react-navigation/stack": "^5.7.1",
"md5": "^2.3.0",
"moment": "^2.27.0",
"react": "16.13.1",
"react-hook-form": "^6.4.1",
"react-native": "0.63.2",
"react-native-code-push": "^6.3.0",
"react-native-code-push-saga": "^1.0.1",
"react-native-gesture-handler": "^1.8.0",
"react-native-reanimated": "^1.13.1",
"react-native-safe-area-context": "^3.1.7",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "^2.9.0",
"react-native-snap-carousel": "^4.0.0-beta.5",
"react-native-svg": "^12.1.0",
"react-native-ui-lib": "^5.15.0",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3"
},
"devDependencies": {
"#babel/core": "7.10.5",
"#babel/runtime": "7.10.5",
"#react-native-community/eslint-config": "1.1.0",
"babel-jest": "25.5.1",
"eslint": "6.8.0",
"jest": "25.5.4",
"metro-react-native-babel-preset": "0.59.0",
"react-native-svg-transformer": "^0.14.3",
"react-test-renderer": "16.13.1"
}
Problem
Whenever I import #react-native-community/netinfo or #react-native-community/async-storage it seems to work fine on Android Emulator. However if I test it live on my iPhone 11 device it crashes almost instantly. All I have to do in order to reproduce the problem is only to import the packages and run it on a iOS device.
I currently don't have the ability to debug for iOS devices as I do not own a MacOS. Is this a known bug or is there a solution to this?
Both packages are from React Native community maybe there is a pattern there. Maybe the packages are affecting other packages causing a crash.

Related

Getting mongoose error on building NestJs project

I have used mongoose package in my nest project but when I am trying to build the project using npm run build.Then its throwing below error in my console:
node_modules/mongoose/node_modules/mongodb/mongodb.d.ts:34:15 - error TS2305: Module '"tls"'
has no exported member 'TLSSocketOptions'.
34 import type { TLSSocketOptions } from 'tls';
I have even updated the mongoose package to the latest version.Then also I am getting the same error:
Below are my dependencies inside package.json file:
"dependencies": {
"#apollo/gateway": "^0.38.0",
"#google-cloud/translate": "^6.2.1",
"#nestjs/common": "^8.0.6",
"#nestjs/core": "^8.0.6",
"#nestjs/cqrs": "^8.0.0",
"#nestjs/graphql": "^8.0.2",
"#nestjs/microservices": "^8.0.6",
"#nestjs/mongoose": "^9.0.3",
"#nestjs/platform-express": "^8.0.6",
"#types/luxon": "^1.15.1",
"apollo-server-express": "^2.25.2",
"bunyan": "^1.8.12",
"bunyan-rotating-file-stream": "^1.6.3",
"connect-redis": "^3.4.1",
"consul": "^0.40.0",
"device-detector-js": "^3.0.3",
"elasticsearch": "^16.2.0",
"express-session": "^1.16.2",
"firebase-admin": "^9.4.2",
"graphql": "^14.7.0",
"graphql-tools": "^4.0.4",
"json-rules-engine": "^3.1.0",
"kafkajs": "^1.15.0",
"lodash": "^4.17.21",
"luxon": "^1.16.0",
"moneysafe": "^2.2.1",
"mongodb": "^3.5.9",
"mongoose": "^6.3.0",
"nestjs-i18n": "^8.1.1",
"node-wit": "^6.0.0",
"reflect-metadata": "^0.1.12",
"rimraf": "^2.6.2",
"rxjs": "^7.3.0",
"ts-morph": "^12.0.0",
"typescript": "^4.3.5",
"uuid": "^3.3.2"
},
"devDependencies": {
"#nestjs/testing": "^5.1.0",
"#types/jest": "^23.3.1",
"#types/lodash": "^4.14.134",
"#types/node": "^10.7.1",
"#types/supertest": "^2.0.5",
"jest": "^23.5.0",
"nodemon": "^1.18.3",
"prettier": "^1.14.2",
"supertest": "^3.1.0",
"ts-jest": "^23.1.3",
"ts-loader": "^4.4.2",
"ts-node": "^7.0.1",
"tsconfig-paths": "^3.5.0",
"tslint": "5.11.0"
}
Someone let me know how can I resolve this error.Any help on this will be really appreciated.
I fixed this by updating #types/node to the latest version. This specific error message is then fixed!

React project crashing Visual Studio after NPM package update

I took over a ASP.net solution with multiple projects in Visual Studio (Professional 2017), one of these projects is in React. I have some experience with React-Native, but I am rather new to React, plus I am new to the code base I inherited.
Since the project was using many outdated and potentially insecure packages (according to npm audit), I decided to update using NPM by carefully replacing some ^1.2.3 with * inside my package.json (see below) as I read somewhere that this is common procedure.
Although there are no errors displayed in Visual Studio's Error List, the React project has troubles to compile and I am seeing an empty page in the browser. The error code is
index.tsx:1 Uncaught Error: Module parse failed: Unexpected token (51:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| ReactDOM.render(
> <LocaleProvider locale={enUS}>
| <Provider store={store}>
| <Layout>
at eval (index.tsx:1)
at Object../src/index.tsx (bundle.js:96)
at __webpack_require__ (bundle.js:20)
at bundle.js:84
at bundle.js:87
(anonymous) # index.tsx:1
./src/index.tsx # bundle.js:96
__webpack_require__ # bundle.js:20
(anonymous) # bundle.js:84
(anonymous) # bundle.js:87
This looks like some webpack issue, but the exact error message is changing while I am trying to resolve the dependencies.
More curiously, my IDE is crashing after a few minutes, while contentiously creating files named VMxx, see my screenshot of the solution explorer
Inside those files I find e.g.
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0
Clearly, something went wrong with the package update. But what does the described behavior mean? Can I deduce which packages I better should not have updated?
Package.json before
"dependencies": {
"antd": "^2.10.0",
"babel-polyfill": "^6.23.0",
"download": "^6.2.5",
"immutable": "^3.8.1",
"moment": "^2.24.0",
"react": "15.5.3",
"react-dom": "15.5.3",
"react-redux": "^5.0.4",
"react-router-dom": "^4.1.1",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.6.0",
"redux-saga": "^0.14.8",
"reselect": "^3.0.0",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"#types/react": "15.0.21",
"#types/react-dom": "0.14.23",
"#types/react-redux": "^4.4.40",
"#types/react-router-redux": "^5.0.0",
"awesome-typescript-loader": "3.1.2",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-transform-es2015-parameters": "^6.24.1",
"babel-preset-env": "^1.4.0",
"css-loader": "^3.2.0",
"extract-text-webpack-plugin": "^2.1.0",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"source-map-loader": "0.2.1",
"style-loader": "^0.17.0",
"ts-loader": "2.0.3",
"typescript": "2.2.1",
"webpack": "^2.7.0"
}
Package.json afterwards
"dependencies": {
"#types/node": "*",
"#types/react-select": "*",
"antd": "2.10.0",
"babel-polyfill": "6.23.0",
"download": "6.2.5",
"draft-js": "^0.11.0",
"immutable": "3.8.2",
"jquery": "^3.4.1",
"moment": "*",
"react": "*",
"react-dom": "*",
"react-lazy-load": "^3.0.13",
"react-redux": "*",
"react-router-dom": "*",
"react-router-redux": "*",
"redux": "3.6.0",
"redux-saga": "0.14.8",
"reselect": "3.0.1",
"webpack-cli": "^3.3.8",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"#types/react": "^16.9.2",
"#types/react-dom": "0.14.23",
"#types/react-redux": "4.4.40",
"#types/react-router-dom": "^4.3.5",
"#types/react-router-redux": "5.0.0",
"ajv": "^6.10.2",
"awesome-typescript-loader": "3.1.2",
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-plugin-transform-es2015-parameters": "6.24.1",
"babel-preset-env": "1.7.0",
"css-loader": "*",
"less": "2.7.3",
"less-loader": "4.1.0",
"source-map-loader": "0.2.1",
"style-loader": "0.17.0",
"ts-loader": "2.0.3",
"typescript": "2.2.1",
"webpack": "^4.40.2"
}

vendor.js is huge after npm run production

I am using Laravue Dashboard based on Laravel and Vue.js, running on an online server, not localhost, it is a fresh install, no edits has been conducted.
My Problem is :
After running npm run watch/dev or even npm run production, vendor.js is about 26MB which I find unreasonably big.
I have tried to run npm run report but nothing shows, no errors or data.
Webpack bundle analyzer plugin is configured but stats.json is empty.
Here are dependencies from package.json:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"resources/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"babel-eslint": "^10.0.2",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"compression-webpack-plugin": "^2.0.0",
"cross-env": "^3.2.3",
"eslint": "^5.16.0",
"eslint-loader": "^2.2.1",
"eslint-plugin-vue": "^5.2.3",
"husky": "^3.0.2",
"laravel-mix": "^4.1.2",
"laravel-mix-eslint": "^0.1.3",
"lint-staged": "^9.2.1",
"resolve-url-loader": "^2.3.1",
"sass-loader": "^7.1.0",
"script-loader": "^0.7.2",
"svg-sprite-loader": "^4.1.3",
"vue-template-compiler": "2.6.10",
"webpack": "^4.39.1",
"webpack-bundle-analyzer": "^3.4.1"
},
"dependencies": {
"axios": "^0.18.1",
"camelcase": "^5.3.1",
"clipboard": "^2.0.4",
"core-js": "^3.1.4",
"driver.js": "^0.9.7",
"dropzone": "^5.5.1",
"echarts": "^4.1.0",
"element-ui": "^2.11.1",
"file-saver": "^2.0.1",
"fuse.js": "^3.4.5",
"js-cookie": "^2.2.0",
"jsonlint": "^1.6.3",
"jszip": "^3.2.2",
"node-sass": "^4.12.0",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"path-to-regexp": "^3.0.0",
"screenfull": "^4.2.1",
"sortablejs": "^1.8.4",
"tui-editor": "^1.4.5",
"vue": "2.6.10",
"vue-count-to": "^1.0.13",
"vue-i18n": "^8.12.0",
"vue-router": "^3.0.7",
"vue-splitpane": "^1.0.4",
"vuedraggable": "^2.23.0",
"vuex": "3.1.0",
"xlsx": "^0.14.4"
}
In the official laravue demo https://laravue.dev/, vendor.js is ~4MB.
I cannot find any reason for this issue, would somebody offer any advise please?
Solved
After hours of inspecting, I found out that " npm run production " wasn't finishing because of memory shortage, this is why no errors were returned, the process was killed at some point with no messages.
simply restarted server and re-ran command.. Worked like magic.
May be if you remove some package that is not needed, will reduce vendor file size more.

How do I reset my Node dependencies (Gatsby, Netlify and NVM issue)

I recently started using NVM but doing so inadvertently broke my Gatsby site dependencies, specifically the Sharp dependency. I'm using Node 10.16.0, but I think the error was caused by running an install with Node 12.
The issue is that some of my modules are not being imported properly - specifically typography.js, but I think the problem is with the Sharp package. I was having build problems on Netlify until I cleared the cache and rebuilt, and now everything works in deployment. The issue is something being cached on my local machine I think.
So I've tried the following:
deleting the package-lock.json
deleting node_modules and running npm install or yarn install
Deleting the cache and public folders in my project dir
None of these has worked so far.
Here's the package.json:
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.19",
"#fortawesome/free-brands-svg-icons": "^5.9.0",
"#fortawesome/free-solid-svg-icons": "^5.9.0",
"#fortawesome/react-fontawesome": "^0.1.4",
"#glidejs/glide": "^3.3.0",
"babel-plugin-styled-components": "^1.10.0",
"bootstrap": "^4.3.1",
"express": "^4.17.1",
"gatsby": "^2.8.5",
"gatsby-background-image": "^0.2.74",
"gatsby-image": "^2.1.2",
"gatsby-plugin-express": "^1.1.6",
"gatsby-plugin-manifest": "^2.1.1",
"gatsby-plugin-offline": "^2.1.1",
"gatsby-plugin-react-helmet": "^3.0.12",
"gatsby-plugin-sharp": "^2.1.3",
"gatsby-plugin-styled-components": "^3.0.7",
"gatsby-plugin-typography": "^2.2.13",
"gatsby-remark-copy-linked-files": "^2.0.13",
"gatsby-remark-images": "^3.0.14",
"gatsby-remark-prismjs": "^3.2.10",
"gatsby-source-contentful": "^2.0.67",
"gatsby-source-filesystem": "^2.0.38",
"gatsby-transformer-remark": "^2.3.12",
"gatsby-transformer-sharp": "^2.1.21",
"prismjs": "^1.16.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.9",
"react-dom": "^16.8.6",
"react-glider": "^1.1.2",
"react-helmet": "^5.2.1",
"react-pure-lifecycle": "^3.0.0",
"react-scroll": "^1.7.11",
"react-typography": "^0.16.19",
"sharp": "^0.22.1",
"styled-components": "^4.2.1",
"typography": "^0.16.19",
"typography-theme-lawton": "^0.16.19"
},
"devDependencies": {
"gatsby-plugin-remove-trailing-slashes": "^2.0.11",
"nodemon": "^1.19.1",
"prettier": "^1.17.1"
},
It would be great to have any suggestions about how I can reset the dependencies...Many thanks.

Can't execute Electron app on other devices after packaging(edit: nfc library is the cause)

I have an electron app that uses Vue.js.
I ran electron-packager and got a nice looking folder. When I run the executable on my own computer it works. The window is displayed, and everything works great.
However, if I run it at any other winx64 computer it fails.
No error is displayed, running through cmd doesn't display anything and background processes are started, but the window doesn't open.
So I thought maybe it's a dependency issue. However, I have both dependencies installed. I have googled for ages but cant find out what the issue is.
"dependencies": {
"axios": "^0.18.0",
"electron-log": "^2.2.14",
"electron-logger": "^0.0.3",
"electron-packager": "^12.1.0",
"moment": "^2.22.1",
"nfc-pcsc": "^0.6.2",
"vue": "^2.0.1",
"vue-config": "^1.0.0",
"vue-momentjs": "^0.1.2",
"vue-router": "^3.0.1",
"vuetify": "^1.0.17"
},
"devDependencies": {
"#babel/core": "^7.0.0-beta.46",
"#babel/plugin-proposal-class-properties": "^7.0.0-beta.46",
"#babel/polyfill": "^7.0.0-beta.46",
"#babel/preset-env": "^7.0.0-beta.46",
"#babel/register": "^7.0.0-beta.46",
"babel-loader": "8.0.0-beta.2",
"cross-env": "^5.1.4",
"css-loader": "^0.28.11",
"devtron": "^1.4.0",
"electron": "^2.0.0",
"electron-debug": "^1.5.0",
"electron-rebuild": "^1.7.3",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue-devtools": "^3.1.9",
"vue-loader": "^15.0.9",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.8.0",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"
}
Edit:
I found out the nfc-pcsc library i'm using is the root of my problem.. No idea why and how to solve it... Im gonna dig in a bit further. Any idea's wy?

Resources