I'm trying to load translations from a JSON file with react-localize-redux and I keep getting this error. This is all fairly new to me so I apologise if it is something obvious. As fair as I can tell from reading documentation this "should" work?
The error message I am receiving:
translate.js
import { combineReducers, createStore } from 'redux'
import { localizeReducer, initialize, addTranslationForLanguage, getTranslate } from 'react-localize-redux'
import translationsEn from '../../../nls/en.json'
const localeStore = createStore(combineReducers({
locale: localizeReducer
}))
const languages = ['en']
localeStore.dispatch(initialize(languages))
localeStore.dispatch(addTranslationForLanguage(translationsEn, 'en'))
export default getTranslate(localeStore.getState().locale)
and in my component:
import translate from '../state/translate/translate'
...
<span className='node-output-schema__title'>{translate('outputSchema.title')}</span>
Any ideas to what might be going wrong?
it seems like you mixed some different frameworks inside here.
The localisation package is called - react-localize-redux.
But inside your error logs I can see that you are using some angular.
Also I just checked the documentation from the react-localize-redux package and it seems like you are working with an outdated version.
For me it should be enough to just provide a Provider to your app and afterwards use the higher order component (import { withLocalize } from "react-localize-redux";
)
Also I would recommend to use this package, which is a lot easier to handle (and indeed I used it for a project myselft)
react-18next (https://github.com/i18next/react-i18next)
this error rases because your property is undefined, so check your error and get the exact line(you can find the error on the console tab of your browser) and check which property used there and check where you filled that property if you didn't fill your property then set it
Related
I am working on a web screen inside a .NET app and I am trying to send date time preference from the system to the web screen using CefSharp settings and setting
AcceptLanguageList = CultureInfo.CurrentUICulture.Name
In my typescript code I want to use dayjs and import dynamically 'dayjs/locale/${language}' where language comes from AcceptLanguageList above.
import React, { useState } from 'react';
import dayjs, { Dayjs } from 'dayjs';
import localeData from 'dayjs/plugin/localeData';
dayjs.extend(localeData);
var lang = navigator.languages != null ? navigator.languages[0] : navigator.language;
lang = lang.toLowerCase();
import(`dayjs/locale/${lang}`).then(
() => {
dayjs.locale(lang);
setAdapterLocale(lang);
});
The thing is, when I run this code in browser and try to import 'dayjs/locale/fr-ca', for example, it works fine, but when 'fr-ca' comes from CefSharp, then the import fails with
Uncaught (in promise) TypeError: Failed to resolve module specifier
'dayjs/locale/fr-ca'
Any help is much appreciated.
If you want to use a dynamic path for the dynamic import then you'll first have to list all of the possible paths that you will potentially want to have, otherwise your bundler wont know which files to include.
You can add import('dayjs/locale/fr-ca') anywhere in your code and the bundler will include it when it builds your app for the browser.
And you'll still going to get that error if you don't have a locale for user's language, so you should catch that case:
import(`dayjs/locale/${lang}`).then(
() => {
dayjs.locale(lang);
setAdapterLocale(lang);
},
() => { // in case the import fails
// maybe default to english
dayjs.locale('en');
setAdapterLocale('en');
});
I figured it out. The problem was that when building the package for the .net app, the package was created using rollup (which is not the case when running in browser).
Rollup needs some special config to support dynamic import:
https://www.npmjs.com/package/#rollup/plugin-dynamic-import-vars
I have a common structure to export/import my screens from an index file like this;
export { default as HomePage } from './HomePage/Home';
export { default as LandingPage } from './LandingPage/Landing';
It was working fine until I update react native from 0.65 to 0.67.4 .
It says "Cannot read property 'HomePage' of undefined". it's like it can't see the index file at all. Remember this was all working fine so I think it's a syntax error or anything minor like that. I've tired to clear watchman and reset cache. Nothing worked.
exact error that I got:
I've been testing Vercel's SWR lately, it looks like the best lib for Next.js data fetching. I have some trouble making it work with TypeScript though.
As in docs I'm trying to build a infinite loader using this code:
const { data, error, isValidating, mutate, size, setSize } = useSWRInfinite(
getKey, fetcher?, options?
)
But I'm getting those errors:
Property 'size' does not exist on type 'SWRResponse<any, any>'.ts(2339)
Property 'setSize' does not exist on type 'SWRResponse<any, any>'.ts(2339)
The rest of the arguments seem to be there, only the last two aren't. What am I missing here? It works perfectly fine without TypeScript. I have both latest versions of Next and SWR. I've tried following the tutorial and adding getKey function, but without luck, the error always occurs.
Any hints?
The fact that TypeScript identifies the return type as SWRResponse indicates that you're probably importing the default export (useSWR hook) of swr rather than useSWRInfinite hook.
import useSWR from 'swr'
Make sure to import useSWRInfinite from its named export.
import { useSWRInfinite } from 'swr'
From version 1.x, the syntax to import useSWRInfinite changed slightly. You should now use:
import useSWRInfinite from 'swr/infinite'
I was getting an error of window undefined when using react-leaflet node module because it relies on window and of course SSR does not support window. I found next/dynamic, however, all the examples I found show how to import a component and not a node module. Is it possible to include a node module and if so how? As an example this is what I'm importing that is giving the window undefined error import { Map, TileLayer, Marker } from 'react-leaflet';
The issue is that next.js dynamic import fails on named exports
Looking at the source code of react-leaflet I can see that each named export can be accessed from a particular file e.g. import Map from 'react-leaflet/lib/Map'
Combine it with dynamic import without SSR
const Map = dynamic(() => import('react-leaflet/lib/Map'), {
ssr: false
});
This should do a trick for you.
A better way of getting named exports with a dynamic import is to do this:
const NamedExport = dynamic(() => import('package-name').then((module) => module.NamedExport));
Note: this will chunk the full 'package-name' package and then simply extract the named export. If you are able to path into the module package like the accepted example, that will probably be better as it will likely give you a smaller chunk.
That error happened when you call that dependency's component (Map, TileLayer, Marker) on your component.
Window of undefined occured when your application is being rendered on server side, because window object is belong to the browser.
To avoid error of window of undefined on server side, you can use process.browser in your component.
ref: https://github.com/zeit/next.js/issues/2473?#issuecomment-362119102
I kept hitting type definition issues with the accepted answer, and I didn't want to import the whole library. This is what I came up with:
reexport/index.ts:
export { Marker, /* any other type you'll need */ } from 'react-leaflet';
Then, in your component/page, simply import anything from the module above.
const Marker = useMemo(() => dynamic<MarkerProps>(
() => import('./reexport').then(re => re.Marker),
{ ssr: false }
), []);
Note that I've wrapped the call to dynamic in a useMemo hook, and also provided a type for the props.
Importing tcomb gives undefined:
import t from 'tcomb';
console.log(t); // undefined
// So this won't work
t.assert(t.Number.is(colorString), 'colorString is invalid argument');
However I got it working like this, which actually I like more:
import {assert, Number} from 'tcomb';
assert(Number.is(colorString), 'colorString is invalid argument');
Importing all as t returns just the assert() method not the full object
import * as t from 'tcomb';
I'm using a pretty standard setup with webpack-dev-server, angular 2, typescript and HMR. All libs so far load ok. The project is already a few months old.
Any idea on what is happening here? Why t is undefined?
Note: I'm using runtime check even if I have TS types all over the place because some services methods could still receive the wrong arguments at runtime. As a sidenote, tcomb seems fine to me, but just to learn, is there a better option than tcomb?
Have you tried var t = require('tcomb')?
Perhaps something to do with the es6 import statement which is not working?