I am using react-admin for creating my website. But i am getting this warning from list page every time 'Warning: Missing translation for key: "";'
const ListTitle = () => {
return <span>User Agents</span>;
}
const SitemapFilter = props => (
<Filter {...props}>
<TextInput label="Type" source="type" alwaysOn/>
</Filter>
);
export const SitemapList = props => (
<List {...props} filters={<SitemapFilter />} title={<ListTitle />}>
<Datagrid>
<TextField source="type" label="Type"/>
<UrlField source="url" label="URL"/>
<EditButton/>
</Datagrid>
</List>
);
I am not able to find the reason. Please advise.
Thanks in advance.
I have found that EditButton component is the cause. Adding label prop to it fixes the issue.
<EditButton label="Edit" />
tl;dr
Check that your backend returns the proper response!
Explanation
The docs on response format state:
DELETE: { data: {Record|null} } The record that has been deleted (optional)
In our API the backend returned a simple HTTP 204 without a content (obviously). This caused the error:
Warning: Missing translation for key: "Cannot read property 'hasOwnProperty' of undefined"
Changing the response to be the deleted record fixed the issue.
If you are also getting maximum call stack size exceeded with this error you may not be returning a not null value from your backend.
For instance, if you have a <TextField source="type" /> and type is required but you return a null value, then you will get this error. The solution is to either make it not required or to return a not null response.
Related
I am currently using Astro SSR with Fastify\Node as my server. I created a SSR\Fastify plugin and its working well. I am running into one issue though,and wanted to see if others have faced similar issue. I am not able to use the React-Select component. It works well when running normal Astro-Build without SSR enabled. Once I run the build command I received the following error message when the page tries to load:Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."
I am leaning towards import issue, but not having any luck narrowing it down.
The type definition is resolving to: react-select/dist/react-selectcjs.d.ts
I get the same error if I use the node ssr plugin as well. I'm not doing anything fancy with the JSX component, this is usage of the react-select:
import Select from "react-select"s
<Select
className="react-select info mx-5 w-100"
classNamePrefix="react-select"
name="singleSelect"
value={pageSelect}
onChange={(value) => {
gotoPage(value.value);
handlePageSelect(value);
}}
options={pageSelectData.map((prop, key) => {
return {
value: key,
label: "Page " + (key + 1),
};
})}
placeholder="Select page"
/>
<Select
className="react-select info mx-5 w-100"
classNamePrefix="react-select"
name="singleSelect"
value={numberOfRows}
onChange={(value) => {
console.log(value);
setPageSize(value.value);
setNumberOfRows(value);
}}
options={numberOfRowsData.map((prop) => {
return {
value: prop,
label: prop + " rows",
};
})}
placeholder="Select #rows"
/>
I found the issue:
I have astro layouts for the following:
SideBarLayout
NavBarLayout
BaseLayout
PageLayout
ContainerLayout
BlocksLayout
BlockLayout
FormLayout
Each of these also leverage a Jsx component. My ContainerLayout and SideBar was missing the client:load value. After correcting that, my forms load properly with event logic and everything and runs withing fastify sever.
I am trying to cache profile pictures that are being fetched from an s3 bucket. On my backend I am able to fetch the url of each image. I then can loop through an array of profiles (which have the pictures' urls) and display the correct images, as used below.
{profiles && profiles.map((profile) => {
<FastImage
source={{
uri: profile.picture, // this is a URL string
cache: FastImage.cacheControl.immutable // Default cache
}}
/>
})}
When I change cache from 'immutable' to 'cacheOnly' the pictures are no longer rendered.
{profiles && profiles.map((profile) => {
<FastImage
source={{
uri: profile.picture, // this is a URL
cache: FastImage.cacheControl.cacheOnly // picture only renders if in cache
}}
/>
})}
But, if I substitute the picture variable with the actual URL string, the picture will render.
{profiles && profiles.map((profile) => {
<FastImage
source={{
uri: 'https://s3.aws.examplePictureKey'
cache: FastImage.cacheControl.immutable // Default cache
}}
/>
})}
Then if I change cache from 'immutable' to 'cacheOnly' the picture persists, telling me it has been cached. What I am wondering is:
Am I making a mistake here? All the documentation/resources I have read through do not have examples when looping through an array, but I am not sure why this would be the problem.
My understanding is that the image cached is based on the url string, if the url does not change FastImage just gets the image in the cache. But the url is not changing, so why wouldn't the image be saved in the cache?
The example above is slimmed down from what I am actually doing, the only difference though is that I am passing each profile element from a parent component before trying to render the image. Would this somehow prevent the image from being cached?
Documentation: https://www.npmjs.com/package/react-native-fast-image
Thanks!
The cache: FastImage.cacheControl.cacheOnly from FastImage means it wont do any network request, it will just try to find from the cache. Default(immutable) means it will only change when the url changes so on any subsequent re-render, if the url changes to anything by chance, it will do network request again. And you need to return the component from map as well and provide the width and height properties to FastImage style as well.
{Array.isArray(profiles) && profiles.map((profile) => {
return <FastImage
source={{
uri: profile.picture, // this is a URL string
// cache: FastImage.cacheControl.immutable // Default cache
}}
style={{width: 200, height: 200}}
/>
})}
Hope it helps.
I don't seem to be able to understand why data is missing. Here is my field:
<ReferenceField source="imageId" reference="files">
<TextField source="urlPath" />
</ReferenceField>
Here is what the main model papers is returning:
brandId: "b3dc4246-3adf-4f4e-9f81-294f23d24977"
brandModelId: "2819360d-2e6e-48e4-88a3-823a03177a7c"
colorId: "98031f74-a83f-4389-b9d6-bab959ff8a0e"
gsm: 200
id: "058cc13d-1255-4d9b-9ccf-e087ddb3935d"
imageId: "1bc99717-f60c-485e-989a-5d1726501b8d"
originalSize: "A4"
paperMaterialId: "5afd0d7c-5ace-49e3-a538-894ce288fe71"
paperSurfaceId: null
price: 12
ref: "44202129"
storeId: "2f7567ad-fa62-4bda-851b-89b8c39a189e"
Here is what the related model files is returning:
id: "1bc99717-f60c-485e-989a-5d1726501b8d"
originalFileName: "palette1.2.png"
type: "undefined"
urlPath: "asdf/101d7c68-9bf4-4d55-bbb5-818f62c480a3-palette1.2.png"
but here is my screenshot with missing data:
Note that the Store related field works, which has the exact same code:
<ReferenceField source="storeId" reference="stores">
<TextField source="name" />
</ReferenceField>
Also, here is my getMany dataProvider:
getMany: (resource, params) => {
const query = {
filter: JSON.stringify({ id: params.ids }),
};
const url = `${API_URL_LOCAL}/${resource}?${stringify(query)}`;
return request(url, 'get', {}, {}).then(({ data }) => ({
data,
}));
},
Any help is welcome.
In cases where you have some reference fields working, and others not, and no error is logged in console, this probably means that the non-working reference resource wasn't declared as Admin child with <Resource name="files" .../>.
From react-admin docs:
Note: You must add a <Resource> for the reference resource -
react-admin needs it to fetch the reference data. You can omit the
list prop in this reference if you want to hide it in the sidebar
menu.
https://marmelab.com/react-admin/Fields.html#referencefield
If none reference resource is working, and the resources has been properly declared, the error will probably rely on your data provider. Log the responses for getMany requests and see if it match the expected format and if it contains any data and not an empty array:
getMany { data: {Record[]}, validUntil?: {Date} }
A {Record} is an object literal with at least an id property, e.g. {
id: 123, title: "hello, world" }.
The validUntil field in the response is optional. It enables the
Application cache, a client-side optimization to speed up rendering
and reduce network traffic
https://marmelab.com/react-admin/DataProviders.html#writing-your-own-data-provider
I'm using react-native-firebase to create dynamic links, when I create standard link everything works fine, but when I'm creating short link, it gives an error: "Error: 400: Your project does not own Dynamic Links domain". Any ideas how is possible to fix that?
UPDATE: problem occurs only in Android, in IOS works fine
Code for the creating short dynamic link:
onClickShare= () => {
const link =
new firebase.links.DynamicLink(redirectLink , Config.FIREBASE_CONFIG.dynamicLink)
.android.setPackageName(Config.ANDROID_PACKAGE_NAME)
.ios.setBundleId(Config.IOS_BUNDLE_ID)
.ios.setAppStoreId(Config.IOS_APP_STORE_ID)
.social.setDescriptionText(description)
.social.setTitle(this.props.event.title)
firebase.links()
.createShortDynamicLink(link, 'SHORT')
.then((url) => {
Share.share({
message: _('shareLinkMessage') + " " + url,
title: _('shareLinkTitle'),
}, {
// Android only:
dialogTitle: _('shareLinkAndroid'),
})
})
If you get such error, update your google-services.json file!
In my case (using Flutter), I was getting this error because of incorrect "uriPrefix" parameter while in DynamicLinkParameters object params:
final DynamicLinkParameters parameters = DynamicLinkParameters(
uriPrefix: your_page_link, //<-- this should be same as in your Firebase project
link: Uri.parse(....),
androidParameters: AndroidParameters(
....
),
iosParameters: IOSParameters(
....
),
);
Please make sure if you have uriPrefix value set properly.
when you get this error that means you did not add the dynamic link domain as a formate of the firebase link.
you must follow this formate:
<app_name.page.link>
In android/app/src/main/AndroidManifest.xml add within the activity:
<!-- Deep linking -->
<meta-data android:name='flutter _deeplinking_enabled'
android:value="true" />
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="http" android:host="<app_name.page.link>" />
<data android:scheme="https" />
</intent-filter>
and added at the same with that formate <app_name.page.link> in dynamic link code.
Try this method,
import dynamicLinks from '#react-native-firebase/dynamic-links';
async function generateLink() {
const link = await dynamicLinks().buildLink({
link: 'valid domain url',
domainUriPrefix: 'valid domain url',
analytics: {
content: 'your data',
},
});
console.log(link)
}
You might not have done npm install if your google-services.json is already updated
Somehow the location of my image is not found load it from props.
This works
let overview_bg = require('../../images/locaties/placeholder.png');
<Image source={overview_bg} style={styles.overview_bg}>
But when I get the url from props it doesn't:
let overview_bg = require(this.props.image);
<Image source={overview_bg} style={styles.overview_bg}>
this.props.image has the exact same url which gives me the error:
Requiring unknown module "../../images/locaties/placeholder.png". If
you are sure the module is there, try restarting the packager or
running "npm install"
I have checked the url multiple times it is exactly the same. I also tested it in console.log
The prop is given from another container which gets it from the store.
From the React Native Image documentation:
Note that in order for this to work, the image name in require has to be known statically.
// GOOD
<Image source={require('./my-icon.png')} />
// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />
// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />