I have a problem where when a site gets loaded, the URL is then changed causing the URL to be incorrect if you then try to share it. The site loads fine otherwise, but then changes to the incorrect URL
For example, the site is located in some sub folders ("en-us/site") on the domain which looks like this if you are on the blog page: www.example.com/en-us/site/blog/. So if you go to that URL the page will load fine but after loading the URL in the address bar will change to just be www.example.com/blog/
This only became an issue when a dev accidentally updating the dependencies in NPM. I have narrowed it down to being an update to Gatsby. Unfortunately there is way too many possibilities for which version is the culprit, nor how to solve it. We went from Gatsby version 2.4.6 to version 2.30.1 so the issue kicks in somewhere between those.
Does anyone have any hints to what could be causing this URL change?
Our dependency list while it was working looked like the following. The only difference that will cause the issue is an update to the gatsby package. I am unsure which specific version starts the issue as it would take too long to try each and every one, but going to 2.30.1 definitely causes issues.
"dependencies": {
"classnames": "^2.2.6",
"esm": "^3.2.25",
"gatsby": "^2.20.2",
"gatsby-plugin-react-helmet": "^3.1.15",
"gatsby-plugin-sass": "^2.3.12",
"gatsby-plugin-sitemap": "^2.3.5",
"gatsby-source-filesystem": "^2.1.10",
"gatsby-transformer-json": "^2.2.26",
"jquery": "^3.4.1",
"node-sass": "^4.14.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.1",
"react-transition-group": "^4.4.1",
"webpack": "^4.31.0"
},
"devDependencies": {
"#hot-loader/react-dom": "^16.10.2",
"#typescript-eslint/eslint-plugin": "^2.31.0",
"#typescript-eslint/parser": "^2.31.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-config-react-app": "^5.2.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-flowtype": "^4.7.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1",
"gatsby-disable-404": "^0.2.1",
"gatsby-plugin-eslint": "^2.0.8",
"prettier": "^1.17.1"
},
The siteUrl in gatsby-config.js is set correctly with https://www.example.com/en-us/site as the URL and assetPrefix is set to /en-us/site.
I have narrowed it down to just an update to the gatsby package will cause the issue. Also the issue seems to only be reproduceable on our staging and production servers. I have been unable to repro locally with a local server setup.
We could keep with the old versions but I don't want to risk this issue in case it accidentally happens again (via rogue package-lock file) and would rather just get to the latest version anyway.
Related
I am not sure if there is specific code I can share. I started working on an app project I hadn't touched since last summer a couple weeks ago, and after many many errors and fixes related to getting the right/most up to date versions of everything running again it seems to MOSTLY work except that every time I use the drawer function to switch screens it gives and error that says "Can't find variable: _updatePropsPaper". The weird part is that even though it gives the error, it still goes to the proper screen, and if I dismiss the error every time I use the drawer it functions normally as far as I can tell. Is this something a newer version of react native drawer introduced that I missed while updating? Or is the problem something else? Either way, I have to figure this out as I believe this is the last existing issue before I can start actual work on the app again. If I am missing any critical information, sorry! This is my first question and also the source of this issue is (as far as I can tell) fairly ambiguous.
These are all my dependencies, in case that helps. Again, the issue seems to only occur when I switch screens with the drawer function, and it still actually changes screens, it just shows and error.
"dependencies": {
"#react-native-masked-view/masked-view": "0.2.6",
"#react-native-picker/picker": "2.4.0",
"#react-navigation/drawer": "^6.4.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/stack": "^6.2.1",
"expo": "^45.0.4",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-country-picker-modal": "^2.0.0",
"react-native-gesture-handler": "^2.4.2",
"react-native-reanimated": "^3.0.0-rc.0",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-tab-view": "^3.1.1",
"react-native-web": "0.17.7",
"world-countries": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.12.9"
I had this exact issue. For me it was a matter of various package versions being incompatible. Here are the versions that managed to fix the issue for me:
"#react-navigation/drawer": "6.4.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/native-stack": "^6.6.2",
"#react-navigation/stack": "^6.2.1",
"react-native": "0.68.2",
"react-native-gesture-handler": "~2.2.1",
"react-native-reanimated": "~2.8.0",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
Im trying to use react-native-webview but it wont load up, it just show white blank screen. I have found multiple sources that it could happen if I use older version of expo, so I updated it to the newest one but problem still occurs.
theese are the versions that Im using from package.json:
"dependencies": {
"expo": "~40.0.0",
"expo-status-bar": "~1.0.3",
"express": "^4.15.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.6.0",
"react-native-orientation": "^3.1.3",
"react-native-reanimated": "~1.7.0",
"react-native-safe-area-context": "0.7.3",
"react-native-screens": "~2.2.0",
"react-native-web": "~0.13.12",
"react-native-webview": "^11.2.4",
"react-navigation": "^4.3.6",
"react-navigation-stack": "^2.3.10",
"socket.io": "^2.3.0",
"socket.io-client": "^2.3.0"
}
if I try to load my app it loads but it wont show webview it shows just blank white screen and I get this warning.
I have tried to downgrade webview to version 11.0.0. rewriting package.json and npm install to create new node_modules but when I did that I got bunch of errors
any recommendations please how can I fix this ? Im trying just simple webview from working example.
I have downloaded react-native-webview and linked it
FINALLY I have solved my problem with webview, it took me around 7 days, I have tried everything possible and the reason was?...Styling, I was trying multiple styling parameters but never combination of height, width + overflow. The overflow is the reason it didnt work. So if you have problem with webview being only white blank screen try this: style={{ height: 150, width: 680,overflow:'hidden' }} ofcourse height/width you can change how you want but it should 100% work.
I have developed a website using react js and I have used following libraries for that.
"bootstrap": "^4.5.0",
"date-fns": "^2.14.0",
"flatlist-react": "^1.4.2",
"keycloak-js": "^10.0.0",
"moment": "^2.18.1",
"react": "^16.1.1",
"react-bootstrap": "^1.0.1",
"react-date-range": "^1.0.3"
It was working all fine, but it's just started giving me an error and I can't figure out what's wrong.
This is the screenshot of the error.
This is the code of the flatlist in my project.
<FlatList
list={this.props.list}
renderItem={this.props.renderItem}
renderWhenEmpty={this.props.renderWhenEmpty}
hasMoreItems={this.props.hasMoreItems}
loadMoreItems={this.props.loadMoreItems}
/>
But as it seems, this is not a problem in my code. Please guide me. What should I do?
If any more clarification is needed, let me know.
I'm having an issue showing the error on the start of the app after build
"TypeError: Super expression must either be null or a function"
As I found many similar question but my problem is different as I've reviewed my code 3 times, not got any import problem, before installing a library named react-native-gifted-chat, my app was working fine. But after that app started to show this error although I've just imported the library (Not Used Any Code of it).
But when I simply remove this line of code import {GiftedChat} from 'react-native-gifted-chat';, my app was working fine again.
Any suggestions?
My packages are:
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-gifted-chat": "^0.13.0",
"react-native-reanimated": "^1.7.1",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.4.0",
"react-navigation": "4.3.3",
"react-navigation-stack": "^2.3.11"
visit this page, this is the pull request for the issue.
I have built a react web application, and somehow the hardcoded texts get replaced in about 30% of the times to "rude" ones. It seems like a virus, I went through the dependencies there all seems fine. I will also add it here. The server side has only 1 AWS lambda that stores data to mongodb
"dependencies": {
"#vimeo/player": "^2.6.4",
"classnames": "^2.2.6",
"hex-rgb": "^3.0.0",
"js-sha256": "^0.9.0",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-ga": "^2.5.3",
"react-pose": "^3.4.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.0.4"
},
Is there any idea to start check? Ever happened to anyone?
If there is any information I can add that might help, please tell me and I will
Thanks in advance
Ok, 12 hours of research have passed and here are the conclusions: Google translate has recognized my site as a wrong language and translated it totally wrong. It changed my whole site texts. I am happy it is behind me, I didn't know what to think about. Thanks!