I am running a React native app with react-i18next and the backend addon. The app works and loads translations perfectly well on Android and Web, but on iOS it fails to load the translations at all.
When i18n is initializing it gives the following error. I am not certain whether the illegal operation error is the cause, but it seems pretty likely.
i18next::backendConnector: loading namespace translation for language en failed, [TypeError: Network request failed]
. . .
Error: EISDIR: illegal operation on a directory, read
at Object.readSync (fs.js:614:3)
at tryReadSync (fs.js:383:20)
at Object.readFileSync (fs.js:420:19)
Is there a configuration somewhere for react-native to let iOS read from the public folder?
My i18n.js:
import * as Localization from 'expo-localization'
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import { initReactI18next } from 'react-i18next'
i18n
.use(Backend)
.use(initReactI18next)
.init({
compatibilityJSON: 'v3',
debug: true,
fallbackLng: 'en-US',
interpolation: { escapeValue: false },
})
i18n.changeLanguage(Localization.locale)
export default i18n
and my translation file, located at public/locales/en-US/translation.json
{
"outOfStock": "Out of Stock"
}
I suspect expo, like react-native is not hosting the translations so they could be fetched via i18next-http-backend.
So I would suggest you load the translations without i18next-http-backend.
As resources on init: https://www.i18next.com/how-to/add-or-load-translations#add-on-init
or with the help of i18next-resources-to-backend: https://www.i18next.com/how-to/add-or-load-translations#lazy-load-in-memory-translations
Related
I am having trouble utilising the libserialport.dart package. I have put a libserialport.so in the root of the project. When trying to run an application I get the following error:
Unhandled exception: Invalid argument(s): Failed to load dynamic library 'libserialport.so': libserialport.so: cannot open shared object file: No such file or directory
This tells me that the package is looking for the file somwhere else - but where?
The original library links the library this way, which results in it not finding the library:
LibSerialPort? _dylib;
LibSerialPort get dylib {
return _dylib ??= LibSerialPort(ffi.DynamicLibrary.open(
resolveDylibPath(
'serialport',
dartDefine: 'LIBSERIALPORT_PATH',
environmentVariable: 'LIBSERIALPORT_PATH',
),
));
}
If I replicate the plugin locally, but changing the linking as such, the library works as expected:
var libraryPath =
path.join(Directory.current.path, 'libserialport.so');
LibSerialPort? _dylib;
LibSerialPort get dylib {
return _dylib ??= LibSerialPort(ffi.DynamicLibrary.open(libraryPath));
}
The question is: where to put the .so file so it would work with the original verison? Where does resolveDylibPath() link to?
If possible I would like to avoid using my modified version as that brings license implications I am not entirely sure how to deal with.
Apparently the function looks for the path in the LIBSERIALPORT_PATH enviroment variable. Setting it to '.' made it work!
In the terminal:
export LIBSERIALPORT_PATH=.
I am attempting to use i18next with Expo, with multiple translation files however I keep getting the following errors:
i18next::translator: missingKey en Common NextSteps NextSteps
i18next::backendConnector: loading namespace Common for language en failed, [TypeError: Network request failed]
My config file is:
import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';
i18n
.use(Backend)
.use(initReactI18next)
.init({
backend: {
loadPath: './translations/en/{{ns}}.json',
},
debug: true,
fallbackLng: 'en',
ns: ['Common'],
defaultNS: 'Common',
});
export default i18n;
In my app screen i am using the hook:
const [t] = useTranslation(['Common'])
and accessing this with:
<Text>{t('Common:NextSteps')}</Text>
The translation files are in the top level at:
I can't find any clear examples of using multiple JSON files with Expo. Thanks
I suspect expo, like react-native is not hosting the translations so they could be fetched via i18next-http-backend. So I would suggest you load the translations without i18next-http-backend. As resources on init: https://www.i18next.com/how-to/add-or-load-translations#add-on-init or with the help of i18next-resources-to-backend: https://www.i18next.com/how-to/add-or-load-translations#lazy-load-in-memory-translations
I am new to NestJs and tried implementing the middleware specified in NestJs documentation,
https://docs.nestjs.com/middleware
When NestMiddleware is imported i am getting the following error
" Module '"../../types/#nestjs/common"' has no exported member 'NestMiddleware'". and similar errors while importing "NestModule" and "MiddlewareConsumer'.
Iam using nestJs version 6.0.0
NestModule, MiddlewareConsumer, and NestMiddleware are all imported from #nestjs/common. From your project root, that would be <root>/node_modules/#nestjs/common/index. If you are having trouble importing these sources, you may need to re-install your dependencies.
I've been trying to set routing to my ionic2 app which is still under development. I'm completely new to the concept of routing.So far whatever I've done is based on NavCtrl.push() or NavCtrl.setRoot().I want to know if routing is possible in ionic2.
But on following the code from official website:https://angular.io/docs/ts/latest/guide/router.html. I got a few errors while running the app. Here is my app.routing.ts file which I created for routing.
import { Routes, RouterModule } from '#angular/router';
import { Contest } from '../pages/contest/contest';
export const appRoute: Routes = [
{ path: '', redirectTo: 'Contest', pathMatch: 'full' },
{ path: 'Contest', component: Contest}
]
export const appRouting = [
RouterModule.forRoot(appRoute)
];
I imported this statement into app.component.ts and injected it into the constructor.
import { Router } from '#angular/router';
constructor(public platform: Platform,protected _router: Router) {
this.initializeApp();
In the app.module.ts I imported the following statements and also set them in the imports inside #ngModule
import { RouterModule, Routes } from '#angular/router';
import {appRouting} from './app.routing';
imports: [appRouting,
IonicModule.forRoot(MyApp)
]
I put the <router-outlet></router-outlet>
in my app.html file.On doing all this when I try to run I get the following errors.
Runtime Error:
WEBPACK_IMPORTED_MODULE_0__angular_core.Version is not a constructor
Typescript Error:
Module '"C:/Users/Impromptu_coder/dem/node_modules/#angular/core/index"' has no exported member 'NgProbeToken
Typescript Error:
Module '"C:/Users/Impromptu_coder/dem/node_modules/#angular/core/index"' has no exported member 'Version'.
I have gone through many sources on the internet about routing in ionic2 and angular2 but most of them seem to be deprecated. Here are the current versions
I'm using:
Ionic2 : v2.2.1
npm: 3.10.10
cordova : 6.5.0
Angular2: Final Release rc5
Kindly tell me what is the exact procedure to set up routing in my app. Do i need to install any dependencies?
Make sure you're dependencies are set according to what's specified in ionic change log:
https://github.com/driftyco/ionic/blob/master/CHANGELOG.md
Is there a reason you want to use angular routing in your ionic 2 app? The ionic 2 navigation system is very intuitive and completely different from that of angular. I would suggest sticking with the built in ionic navigation unless you can define a very real need to do otherwise. Unless you're just trying to use angular navigation out of curiosity. In that case, get your dependencies up to date and give it another try.
Im use react_on_rails gem and im try render the component by the server.
When i use components directly from the app it works OK!
import Hello from "../components/Hello"
ReactOnRails.register({
Hello
})
But when i try use a package, the app throws error.
import { Ballon } from "foo-package"
import Hello from "../components/Hello"
ReactOnRails.register({
Ballon,
Hello
})
ERROR in SERVER PRERENDERING
Encountered error: "ReferenceError: document is not defined"
Someone knows why?
window and document are global variables that are only available in a browser environment.
When you are rendering on the server you don't have that environment. You need to safeguard your code and skip invoking any functions on those objects when you are in a node.js environment. For example:
if (typeof document !== 'undefined') {
// Do your document thing here
} else {
console.log("We're on server")
}
I found! The 'foo-package' uses a non isomorphic package. Its breaks the server rendering. The package is react-google-chart.