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.
Related
I'm using visual studio code with node v18.
I use structuredClone in my application and it runs fine but when it comes to running a test I get
"ReferenceError: structuredClone is not defined"
I don't know how mocha works, but is it for some reason using an older version of node or is there some other dependency creating an issue?
"dependencies": {
"#sendgrid/mail": "^7.6.2",
"#types/chai": "^4.3.1",
"#types/express": "^4.17.13",
"#types/mocha": "^9.1.1",
"#types/node": "^18.0.0",
"#types/npm": "^7.19.0",
"bcrypt": "^5.0.1",
"body-parser": "^1.19.2",
"chai": "^4.3.6",
"connect-flash": "^0.1.1",
"cookie-parser": "^1.4.6",
"dotenv": "^16.0.0",
"eventemitter2": "^6.4.5",
"express": "^4.17.3",
"express-validator": "^6.14.0",
"jsdom": "^20.0.0",
"jsonwebtoken": "^8.5.1",
"marked": "^4.0.12",
"memory-cache": "^0.2.0",
"mocha": "^10.0.0",
"mssql": "^8.0.2",
"sanitize-html": "^2.7.0",
"validator": "^13.7.0",
"xsg.spider": "file:./../spider"
},
"devDependencies": {
"#types/bcrypt": "^5.0.0",
"#types/connect-flash": "^0.0.37",
"#types/cookie-parser": "^1.4.2",
"#types/dompurify": "^2.3.3",
"#types/jsdom": "^16.2.14",
"#types/jsonwebtoken": "^8.5.8",
"#types/marked": "^4.0.3",
"#types/memory-cache": "^0.2.2",
"#types/mssql": "^7.1.5",
"#types/passport-local": "^1.0.34",
"#types/sanitize-html": "^2.6.2",
"#types/validator": "^13.7.2",
"nyc": "^15.1.0",
"ts-node": "^10.7.0",
"typescript": "^4.6.4"
}
It's probably a bug, as a turnaround to deep clone your object, you can use JSON.parse & JSON.stringify:
if (global.structuredClone)
clonedObject = structuredClone(object)
else
clonedObject = JSON.parse(JSON.stringify(object))
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!
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.
Error: Cannot find module 'sharp'
Require stack:
- D:\Marketing\sbj-react\suburban\node_modules\gatsby-plugin-manifest\safe-sharp.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby-plugin-manifest\gatsby-node.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\bootstrap\resolve-module-exports.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\bootstrap\load-plugins\validate.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\bootstrap\load-plugins\load.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\bootstrap\load-plugins\index.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\bootstrap\index.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\commands\develop.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby-cli\lib\create-cli.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby-cli\lib\index.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\bin\gatsby.js
1) npm install
2) npm also check with npm install --unsafe perm
3) npm start
4) npm install sharp
But still have same problem with me please resolve my question.
This is my package.json
{
"name": "Ashish",
"description": "Ashish Group Project",
"version": "1.0.0",
"author": "AshishBhangade <ashishbhangade#gmail.com>",
"dependencies": {
"axios": "^0.18.0",
"babel-plugin-styled-components": "^1.10.0",
"base-64": "^0.1.0",
"bcryptjs": "^2.4.3",
"bootstrap": "^4.1.3",
"gatsby": "^2.0.53",
"gatsby-background-image": "^0.9.11",
"gatsby-graphiql-explorer": "^0.2.29",
"gatsby-image": "^2.0.20",
"gatsby-plugin-compression": "0.0.1",
"gatsby-plugin-compression-v2": "^0.1.0",
"gatsby-plugin-drift": "^1.0.0",
"gatsby-plugin-facebook-analytics": "^2.0.2",
"gatsby-plugin-facebook-pixel": "^1.0.3",
"gatsby-plugin-facebook-sdk": "^1.0.6",
"gatsby-plugin-google-analytics": "^2.0.9",
"gatsby-plugin-google-gtag": "^1.0.8",
"gatsby-plugin-google-tagmanager": "^2.0.7",
"gatsby-plugin-hotjar": "^1.0.1",
"gatsby-plugin-manifest": "^2.0.9",
"gatsby-plugin-netlify": "^2.0.6",
"gatsby-plugin-offline": "^2.0.21",
"gatsby-plugin-react-helmet": "^3.0.2",
"gatsby-plugin-robots-txt": "^1.4.0",
"gatsby-plugin-sass": "^2.0.5",
"gatsby-plugin-sentry": "^1.0.0",
"gatsby-plugin-sharp": "^2.0.12",
"gatsby-plugin-sitemap": "^2.0.4",
"gatsby-plugin-styled-components": "^3.0.4",
"gatsby-plugin-zopfli": "^1.0.2",
"gatsby-source-apiserver": "^2.1.4",
"gatsby-source-filesystem": "^2.0.8",
"gatsby-transformer-sharp": "^2.1.8",
"jquery": "^3.3.1",
"logrocket": "^1.0.6",
"logrocket-react": "^4.0.1",
"moment": "^2.24.0",
"moment-timezone": "^0.5.23",
"node-sass": "^4.10.0",
"perm": "^1.0.0",
"react": "^16.6.3",
"react-bootstrap": "^0.32.4",
"react-bootstrap-time-picker": "^1.0.3",
"react-datepicker": "^2.0.0",
"react-device-detect": "^1.11.14",
"react-dom": "^16.6.3",
"react-ga": "^2.5.6",
"react-helmet": "^5.2.0",
"react-input-mask": "^2.0.4",
"react-number-format": "^4.0.6",
"react-otp-input": "^0.3.1",
"react-phone-input-2": "^2.11.0",
"react-places-autocomplete": "^7.2.1",
"react-popper": "^1.3.2",
"react-scroll": "^1.7.12",
"react-select": "^3.0.8",
"react-slick": "^0.23.2",
"reactstrap": "^6.5.0",
"slick-carousel": "^1.8.1",
"socket.io-client": "^2.2.0",
"styled-components": "^4.1.3",
"universal-cookie": "^3.0.7"
}
}
I had the same problem and solved with
npm install sharp
I was getting the same error on a mac and this fixed my issue
Basically:
delete node_modules folder
xcode-select --install
close and open terminal
yarn install (I assume it would also work with npm install)
npm rebuild --verbose sharp
this single line command helped me. This was a magic.
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"
}