How to use i18next with remix-typescript and have autocomplete? - reactjs

I have remix app (Bluestack). I am using i18next for internationalisation. I want to have autocomplete feature while using keys from index.json similar to how typescript shows suggestion when type is defined.
I have tried https://www.i18next.com/overview/typescript whats given over here but the it's not working. In docs it's mentioned to create that file in src folder but in remix app there is no such directory. Where exactly do i have to keep that file? What am i missing?
Package versions:
"#remix-run/express": "^1.6.0",
"react-i18next": "^11.18.6"
"#remix-run/node": "^1.6.0",
"#remix-run/react": "^1.6.0",
"#remix-run/server-runtime": "^1.6.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.18.6"
This my directory structure. translation file is inside the public/locales/english/en/index.json

Related

does expo have problem with using react native webview?

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.

TypeError: react_1.forwardRef is not a function

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.

TypeError: Super expression must either be null or a function (React Native)

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.

GatsbyJS + Firebase : initializeApp is not a function

I am totally stuck.
Have a setup of GatsbyJS 1 with gatsby-next and React 16 + latest Firebase 5.5.7
In develop mode everything works fine, but when I try to make a build I always get:
WebpackError: _firebase2.default.initializeApp is not a function
I have already tried all of the following kinds if imports, and all of them result in this error:
import firebase from 'firebase';
// const firebase = require('firebase/app')
// import * as firebase from 'firebase';
var config = {
...
};
firebase.initializeApp(config);
I have tried updating to the latest versions of all libraries. The only one I can't really update at the moment due to lots of migrations is GatsbyJS 2.0
Here is my package.json:
"dependencies": {
"#material-ui/core": "^3.2.2",
"#material-ui/icons": "^3.0.1",
"aws-sdk": "^2.345.0",
"cookieconsent": "^3.0.6",
"firebase": "^5.5.7",
"firebaseui": "^3.4.1",
"fsevents": "^1.2.4",
"gatsby": "^1.9.279",
"gatsby-link": "^1.6.46",
"gatsby-plugin-google-analytics": "^1.0.20",
"gatsby-plugin-i18n": "^0.4.1",
"gatsby-plugin-react-helmet": "^1.0.8",
"gatsby-plugin-react-next": "^1.0.11",
"material-ui-chip-input": "^1.0.0-beta.8",
"paypal-checkout": "^4.0.228",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-firebaseui": "^3.1.2",
"react-intl": "^2.4.0",
"reactstrap": "^6.5.0"
},
For some time project was running fine on some older versions of libraries.
Long story short, Firebase now includes Fetch polyfill that references self internally, so it doesn't work with gatsby.
Workaround would be to not load firebase using null-loader, but then you can't reference anything firebase-related during your build time, including properties for authentication providers
Issue seems to be limited to Gatsby v1 with Firebase 5.0.+
Rolling back to older version of Firebase is not possible due to an issue with pre-gyp and node version conflicts.
Posted a bug on: https://github.com/gatsbyjs/gatsby/issues/9681

React web application injected texts virus

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!

Resources