React project crashing Visual Studio after NPM package update - node.js

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"
}

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 application rendering in local but build fails on remote

I am facing the following error:
'Switch' cannot be used as a JSX component.
Its instance type 'Switch' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/usr/src/app/client/node_modules/#types/react-transition-group/node_modules/#types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
Type '{}' is not assignable to type 'ReactPortal'. TS2786
I have not changed any version. And also not modify the code of my app. 5 days ago this started to not compile in my remote server. I create the images on a alpine:node docker with version 14.17.4
Can someone provide some insight on where is the error here?
Dependencies versions:
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material-ui/pickers": "^4.0.0-alpha.12",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/openpgp": "^4.4.14",
"#types/truncate-middle": "^1.0.1",
"axios": "^0.20.0",
"bottleneck": "^2.19.5",
"clsx": "^1.1.1",
"file-saver": "^2.0.5",
"file-selector": "^0.2.2",
"form-data": "^3.0.0",
"formik": "^2.1.4",
"formik-material-ui": "^2.0.0-beta.1",
"formik-material-ui-lab": "0.0.5",
"formik-material-ui-pickers": "0.0.8",
"http-proxy-middleware": "^1.0.6",
"lodash": "^4.17.15",
"material-ui-dropzone": "3.3.0",
"moment": "^2.26.0",
"node-fetch": "^2.6.0",
"node-sass": "^4.14.1",
"openpgp": "^4.4.5",
"promise.allsettled": "^1.0.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-flexbox-grid": "^2.1.2",
"react-ga": "^2.7.0",
"react-joyride": "^2.3.0",
"react-kawaii": "^0.16.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-scrollable-feed": "^1.1.2",
"react-snowfall": "1.0.2",
"react-spring": "^8.0.27",
"trace-error": "^1.0.3",
"truncate-middle": "^1.0.6",
"typescript": "^3.7.5",
"uuid": "^8.1.0",
"yup": "^0.29.1"
},
"devDependencies": {
"#types/file-saver": "^2.0.1",
"#types/jest": "^24.9.1",
"#types/lodash": "^4.14.155",
"#types/node": "^12.12.59",
"#types/react": "^16.9.36",
"#types/react-dom": "^16.9.8",
"#types/react-kawaii": "^0.11.0",
"#types/react-router-dom": "^5.1.5",
"#types/uuid": "^8.0.0",
"#types/yup": "^0.29.3"
}
Could it be that the dependencie React version of react-transition-group is different than the normal one? It doesn't make sense for me that this compiles in local and not in remote.

App crashes on AsyncStorage and/or NetInfo import

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.

How do I recompile my NodeJS app to update files? Why are images encoded? Why is the workflow so bad?

Beginner question. Got an app running on a server, it is a complex one.
Now in the client directory there is an index file called index.html (I thought node was using express/routed, what is it doing there)
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
//devtool: '#cheap-module-eval-source-map',
devtool: '#source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
1) Why are the image URLS encoded? And I can instead paste absolute URLS? This is not developer friendly, makes me want to abandon Node right away if they dont have proper views and need extra steps
<img class="color loader-box-image" data-v-553e61a2="" alt=. src="data:image/png;base64,iVBOR....." LONG STRING />
2) Ok so assume I am updating the index file in there, it does not update the live page. I have to assume the index file is either cached or Node itself is caching some version of it. Is the index.html just a static file? And if not, why?
What are best practices to get a simplified workflow?
Thank you
Edit: I understand node itself is acting like a webserver (JS based) and that routes have to be established. How do static files play into this?
"dependencies": {
"axios": "^0.18.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"bootstrap": "^4.0.0",
"bootstrap-social": "^5.1.1",
"dependency-list": "^0.2.2",
"jquery": "^3.2.1",
"jquery-sparkline": "^2.4.0",
"moment": "^2.20.1",
"react-stockcharts": "^0.6.1",
"sitemap": "^1.13.0",
"socicon": "^3.0.5",
"vee-validate": "^2.0.2",
"vue": "^2.5.2",
"vue-authenticate": "^1.3.4",
"vue-axios": "^2.0.2",
"vue-event-calendar": "git+https://git#github.com/adi-darachi/vue-event-calendar.git",
"vue-multiselect": "^2.0.8",
"vue-resource": "^1.3.4",
"vue-router": "^3.0.1",
"vue-search-select": "^2.5.0",
"vue-social-sharing": "^2.3.3",
"vue-socket.io": "^2.1.1-a",
"vue-tweet-embed": "^2.0.0",
"vue-virtual-scroll-list": "^1.2.4",
"vuetrend": "^0.2.3",
"vuex": "^3.0.1"
},
> "devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"bootstrap-vue": "^1.4.1",
"chai": "^4.1.2",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"compression-webpack-plugin": "^1.1.11",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^3.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"mocha": "^3.2.0",
"nightwatch": "^0.9.12",
"npm": "^5.5.1",
"offline-plugin": "^4.9.0",
"opengraph-html-webpack-plugin": "^1.0.0",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.14",
"portfinder": "^1.0.13",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"sitemap-webpack-plugin": "^0.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.18.2",
"webpack-merge": "^4.1.0"
},
You are conflating node and webpack. Node isn't encoding those images, one of the webpack plugins is and is doing so to save you a network request.
Additionally, you said in one of your comments:
Thanks, good advice but I cant. I simply need to modify some CSS and
swap the logo - that should be simple enough but for that I need to
get a basic understanding of NodeJS in very little time. I dont get
why there is an index.html file in the first place when I learned that
Node uses dedicated directories for files previously
You are using html-webpack-plugin. That generates the index.html file for you. Don't modify the generated file, modify the configuration that generates the file. Otherwise you're going to get a regression. Read the documentation on that plugin and you should be able to figure out where the logo is being drawn from in your code.
The problem is that this some sort of pre-built starter project, and the developer made some decisions which you don't fully understand yet.
Since this strategy has frustrated you, I recommend trying a different strategy: build the simplest possible project that you possibly can, using as few libraries as possible, and build out from there. Good luck!

Deploy Django/React application heroku

I have deployed django app on heroku, and everything is fine, no errors, etc. I'm using react on frontend, and I want to do npm install, gulp build so I can configurate my app properly.
I can not run heroku run npm install, all I have is bash: npm: command not found, and I suppose that is ok because I need to trigger it somehow when he is building the app on the server, so I've modify my package.json like this:
{
"name": "Test app",
"version": "1.0.0",
"description": "Testing",
"main": "bundle.js",
"scripts": {
"postinstall": "npm install"
},
"dependencies": {
"bootstrap": "^3.3.7",
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"browser-sync": "^2.10.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",
"classnames": "^2.2.0",
"core-util-is": "^1.0.1",
"del": "^2.1.0",
"flux": "^2.1.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-bless": "^3.0.1",
"gulp-connect": "^2.2.0",
"gulp-html-replace": "^1.5.4",
"gulp-if": "^2.0.0",
"gulp-insert": "^0.5.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.1.0",
"gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^1.4.2",
"history": "^1.13.0",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"react": "^0.14.2",
"react-addons": "^0.9.0",
"react-bootstrap": "^0.27.3",
"react-dom": "^0.14.2",
"react-mixin": "^3.0.3",
"react-router": "^1.0.0",
"react-style": "^0.5.5",
"reqwest": "^2.0.5",
"rimraf": "^2.4.3",
"run-sequence": "^1.1.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.6.0",
"when": "^3.7.4"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"browser-sync": "^2.10.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",
"classnames": "^2.2.0",
"core-util-is": "^1.0.1",
"del": "^2.1.0",
"flux": "^2.1.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-bless": "^3.0.1",
"gulp-connect": "^2.2.0",
"gulp-html-replace": "^1.5.4",
"gulp-if": "^2.0.0",
"gulp-insert": "^0.5.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.1.0",
"gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^1.4.2",
"history": "^1.13.0",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"react": "^0.14.2",
"react-addons": "^0.9.0",
"react-bootstrap": "^0.27.3",
"react-dom": "^0.14.2",
"react-mixin": "^3.0.3",
"react-router": "^1.0.0",
"react-style": "^0.5.5",
"reqwest": "^2.0.5",
"rimraf": "^2.4.3",
"run-sequence": "^1.1.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.6.0",
"when": "^3.7.4"
},
"engines": {
"node": "8.0.0",
"npm": "5.0.4"
},
"author": "",
"license": ""
}
But that still does not trigger npm install process on deployment, so can any one help me understand how can I configurate this properly?
This is my Procfile:
web: python manage.py runserver 0.0.0.0:$PORT --noreload
worker: python worker.py
Heroku supports different server-side languages via buildpacks:
Buildpacks are responsible for transforming deployed code into a slug, which can then be executed on a dyno. Buildpacks are composed of a set of scripts, and depending on the programming language, the scripts will retrieve dependencies, output generated assets or compiled code, and more.
Since the Python part of your application seems to be installing correctly Heroku must be detecting it as a Python application (because it includes a requirements.txt file) or you have configured it as one manually. In many cases a single buildpack is sufficient.
However, since you are also using Node.js you should enable a second buildpack:
There are many scenarios in which a single buildpack is not sufficient when building an application. This includes cases when you need to:
Run a buildpack for each language your app uses. For example, run a JavaScript buildpack for assets and a Ruby buildpack for your application.
The basic flow looks like this (using the Heroku CLI on your development machine):
heroku buildpacks:set heroku/python
heroku buildpacks:add --index 2 heroku/nodejs
The links I provided above contain many more details. I recommend reading both of them in their entirety.

Resources