Uncaught TypeError: Cannot convert undefined or null to object
<MapContainer center={position} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={position}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
from leaflet-src.js:144
I am trying to render the map from the example given in https://react-leaflet.js.org/docs/example-popup-marker/ site but getting this error.
Related
I am trying to create an InfoWindow with Google Map API, but there is always an extra small box with the same class to the big InfoWindow. Any way I can get rid of the small InfoWindow?
Here's the link of the image showing the extra small box
Here's my code. Full code here: https://gist.github.com/juifuhung/c2ca99cfbb20bf53686b8bc57d8a8524
return (
<div style={{ display: "flex" }}>
{console.log(array)}
<GoogleMap
zoom={12}
center={center}
mapContainerClassName="map-container"
>
{array.map((location) => (
<Marker
key={uuidv4()}
icon={location.icon}
position={{ lat: location.lat, lng: location.lng }}
onClick={() => {
setSelected(location);
}}
/>
))}
{selected && (
<InfoWindow
position={{ lat: selected.lat, lng: selected.lng }}
onCloseClick={() => setSelected(null)}
>
<div>
<h1>{selected.title}</h1>
<p>{selected.description}</p>
<FaHeart />
<img src={selected.image} alt="" />
</div>
</InfoWindow>
)}
</GoogleMap>
<p>map</p>
</div>
);
};
Try setting the size for your info window, or there might be a bool to set the small info box into hidden
<InfoWindow
this.state.isOpen &&
<InfoWindow onCloseClick={() => this.setState({isOpen:
false})}>
position={{ lat: selected.lat, lng: selected.lng }}
onCloseClick={() => setSelected(null)}
>
<div>
<h1>{selected.title}</h1>
<p>{selected.description}</p>
<FaHeart />
<img src={selected.image} alt="" />
</div>
</InfoWindow>
But if this is an old api, please update to the latest one
#react-google-maps/api
I'm using this code in MUI for drawing Card.
<Card {...props}>
<CardHeader title="test" style={{ textAlign: 'center' }} />
<Divider />
<CardContent>
<Doughnut data={data} options={options} />
</CardContent>
</Card>
But sometimes, the data value can be empty, and the card will be blank. Who can help me, how can I set the default value of the Card if the data is empty? Like NoRowsOverlay on DataGrid
<Card {...props}>
<CardHeader title="test" style={{ textAlign: 'center' }} />
<Divider />
<CardContent>
{
data ? (
<Doughnut data={data} options={options} />
) : (
<NoRowsOverlay />
)
}
</CardContent>
</Card>
You can change data ? to whatever true/false check you need to make. Also you probably need to change <NoRowsOverlay /> to some other component you want to display instead.
You can use ??. For example: data={data ?? 'defaultValue'}.
Someone help me, I built an application with NEXT and Material UI and now for some reason even though the dev server works perfectly fine the productio build is breaking. I tried to alter my _document.ts as shown below:
import Document, { Html, Head, Main, NextScript } from 'next/document';
import React from 'react';
import { ServerStyleSheets } from '#mui/styles';
export default class MyDocument extends Document {
render() {
return (
<Html lang='en'>
<Head>
<link rel='preconnect' href='https://fonts.googleapis.com' />
<link rel='preconnect' href='https://fonts.gstatic.com' />
<link
href='https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400&display=swap'
rel='stylesheet'
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// Render app and page and get the context of the page with collected side effects.
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [
...React.Children.toArray(initialProps.styles),
sheets.getStyleElement(),
],
};
};
and this is _app.tsx:
import '../styles/root.scss';
import '../styles/global/_page.scss';
import { Provider } from 'react-redux';
import type { AppProps } from 'next/app';
import Notification from '../components/Common/Notifications/Notification';
import store from '../redux/app/store';
import React from 'react';
import MIUIHeader from '../components/Common/MUIComponents/MUI-Header/MUIHead';
export default function MyApp({ Component, pageProps }: AppProps) {
React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
//#ts-ignore
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
return (
<Provider store={store}>
<React.Fragment>
<MIUIHeader />
<Component {...pageProps} />
<Notification />
</React.Fragment>
</Provider>
);
}
And here's my Material UI Component:
import React, { ReactElement } from 'react';
import TextField from '#mui/material/TextField';
import LocalPhoneIcon from '#mui/icons-material/LocalPhone';
import MuiPhoneNumber from 'material-ui-phone-number';
import Autocomplete from '#mui/material/Autocomplete';
import Button from '#mui/material/Button';
import MailIcon from '#mui/icons-material/Mail';
import PersonIcon from '#mui/icons-material/Person';
import LocationOnIcon from '#mui/icons-material/LocationOn';
import LocationCityIcon from '#mui/icons-material/LocationCity';
import BusinessCenterIcon from '#mui/icons-material/BusinessCenter';
import ShareIcon from '#mui/icons-material/Share';
import classes from './VibeForms.module.scss';
import CorporateFareIcon from '#mui/icons-material/CorporateFare';
import ImageCarasoul from '../../../ImageCarasoul/ImageCarasoul';
interface Props {}
const imagePaths = [
'/screen-graphics/signup/individual/graphic-1.svg',
'/screen-graphics/signup/individual/graphic-2.svg',
'/screen-graphics/signup/individual/graphic-3.svg',
];
const maxMultilineRows = 3;
export default function LoginForm({}: Props): ReactElement {
return (
<React.Fragment>
<div className={classes.LoginColumnGrid}>
<ImageCarasoul imagePaths={imagePaths} />
<div className={classes.LoginColumn}>
<div className={classes.LoginRowGrid}>
<PersonIcon />
<TextField
required
className={classes.FormInputField}
label='Full Name'
size='small'
type='text'
/>
</div>
<div className={classes.LoginRowGrid}>
<MailIcon />
<TextField
required
className={classes.FormInputField}
label='Email Address'
size='small'
type='email'
/>
</div>
<div className={classes.LoginRowGrid}>
<LocalPhoneIcon />
<MuiPhoneNumber
variant='outlined'
name='phone'
data-cy='user-phone'
required
className={classes.FormInputField}
label='Phone Number'
size='small'
defaultCountry={'in'}
onChange={(e) => console.log(e)}
/>
</div>
<div className={classes.LoginRowGrid}>
<ShareIcon />
<TextField
required
className={classes.FormInputField}
label='Social Media Links'
size='small'
type='text'
multiline
maxRows={maxMultilineRows}
/>
</div>
<div className={classes.LoginRowGrid}>
<CorporateFareIcon />
<Autocomplete
disablePortal
options={[
'Workshop/Training',
'Social Media Promotion',
'Our Tie Ups',
'Networking',
]}
renderInput={(params) => (
<TextField
{...params}
label='Services you are looking for'
required
className={classes.FormInputField}
size='small'
/>
)}
/>
</div>
<div className={classes.LoginRowGrid}>
<CorporateFareIcon />
<TextField
required
className={classes.FormInputField}
label='Any Other Specific Requests?'
size='small'
type='text'
multiline
maxRows={maxMultilineRows}
/>
</div>
</div>
<div className={classes.LoginColumn}>
<div className={classes.LoginRowGrid}>
<CorporateFareIcon />
<Autocomplete
disablePortal
options={['Beginer', 'Intermediate', 'Expert']}
renderInput={(params) => (
<TextField
{...params}
label='Enter your Profession'
required
className={classes.FormInputField}
size='small'
/>
)}
/>
</div>
<div className={classes.LoginRowGrid}>
<LocationOnIcon />
<Autocomplete
disablePortal
options={['Bangalore', 'Chennai', 'Hyderabad', 'Mumbai']}
renderInput={(params) => (
<TextField
{...params}
label='State'
required
className={classes.FormInputField}
size='small'
/>
)}
/>
</div>
<div className={classes.LoginRowGrid}>
<LocationCityIcon />
<Autocomplete
disablePortal
options={['Bangalore', 'Chennai', 'Hyderabad']}
renderInput={(params) => (
<TextField
{...params}
label='City'
required
className={classes.FormInputField}
size='small'
/>
)}
/>
</div>
<div className={classes.LoginRowGrid}>
<CorporateFareIcon />
<Autocomplete
disablePortal
options={['Beginer', 'Intermediate', 'Expert']}
renderInput={(params) => (
<TextField
{...params}
label='Profession Level'
required
className={classes.FormInputField}
size='small'
/>
)}
/>
</div>
<div className={classes.LoginRowGrid}>
<BusinessCenterIcon />
<TextField
required
className={classes.FormInputField}
label='Work Experience'
size='small'
type={'number'}
InputProps={{
endAdornment: <label>Years</label>,
}}
/>
</div>
<div className={classes.LoginRowGrid}>
<CorporateFareIcon />
<TextField
required
className={classes.FormInputField}
label='Your Achievements'
size='small'
type='text'
multiline
maxRows={maxMultilineRows}
/>
</div>
</div>
</div>
<Button
variant='contained'
style={{ alignSelf: 'end', margin: '1rem', width: '10rem' }}>
Next
</Button>
</React.Fragment>
);
}
I am using sass modules along with Material UI in NEXT. I tried all the solutions out there mentioned in github and stack overflow but nothing seems to work ;(.
Since most of the documents were outdated to an older version of Material UI, I found the solution in their github repo. They have updated it 20 days back and it works fine. In case someone may want to reference this in future, kindly keep checking this repo.
Here you will find the exact configuration you need to do for _app.tsx and _document.tsx. Additionally you need to also create two files for themes and createEmotionCache as well. The location doesn't matter though.
I have the basic example from React-leaflet, but for the life of me I cannot get anything to display. I am using this fix from Jeremy Monson for the common babel-loader issue. I was having the same problems of no display when I went through the manual fixes. Right now I am using styled-components, but I was having the same issue with regular CSS. My map component page looks like this.
import React from 'react'
import styled from '#emotion/styled'
import { MapContainer, TileLayer, Marker, Popup } from '#monsonjeremy/react-leaflet'
const Leaflet = styled.div`
height:500px;
width:500px;
`
const Map = () => {
return (
<Leaflet>
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</Leaflet>
)
}
export default Map
I am loading the leaflet css in the of head my index.html page. I am importing my map component in App.js and rendering it there.
Any thoughts or pointing in the right direction would be much appreciated.
Add height to your map container using style prop:
<MapContainer
center={[51.505, -0.09]}
zoom={13}
scrollWheelZoom={false}
style={{height: '100%'}} // Add a height
>
...
I am getting the error "Cannot add direct child without default aggregation defined for control sap.m.Label". Not sure what this means. Here is my fragment:
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:f="sap.f">
<ResponsivePopover id="popover" title="{Name}" class="sapUiPopupWithPadding" placement="Bottom">
<beginButton>
<Button id="submit" text="{i18n>submit}" press="onSubmit" class="sapUiTinyMargin"/>
</beginButton>
<content>
<f:GridContainer>
<f:layout>
<f:GridContainerSettings rowSize="5rem" columnSize="8rem" gap="1rem"/>
</f:layout>
<f:layoutS>
<f:GridContainerSettings rowSize="5rem" columnSize="10rem" gap="0.5rem"/>
</f:layoutS>
<f:layoutXS>
<f:GridContainerSettings rowSize="5rem" columnSize="10rem" gap="0.5rem"/>
</f:layoutXS>
<Label text="{i18n>req}" required="true">
<f:layoutData>
<f:GridContainerItemLayoutData columns="3"/>
</f:layoutData>
</Label>
<Label id="txt" text="{i18n>cat}" required="true">
<f:layoutData>
<f:GridContainerItemLayoutData columns="3"/>
</f:layoutData>
</Label>
<RadioButton id="rbtn1" text="{i18n>grq}">
<f:layoutData>
<f:GridContainerItemLayoutData columns="4"/>
</f:layoutData>
</RadioButton>
<RadioButton id="rbtn2" text="{i18n>frq}">
<f:layoutData>
<f:GridContainerItemLayoutData columns="4"/>
</f:layoutData>
</RadioButton>
<TextArea id="txtarea" value="" placeholder="{i18n>typeq}" growing="true" growingMaxLines="10" width="100%">
<f:layoutData>
<f:GridContainerItemLayoutData columns="7"/>
</f:layoutData>
</TextArea>
<Text text="{i18n>note}">
<f:layoutData>
<f:GridContainerItemLayoutData columns="7"/>
</f:layoutData>
</Text>
</f:GridContainer>
</content>
</ResponsivePopover>
</core:FragmentDefinition>
Expected result is the fragment will load with out errors.
The named aggregation must have the same namespace as the parent tag.
The namespace of the parent control tag and the aggregation tag must be the same. (Source)
In your case, the issue is in <SomeSapMControl><f:layoutData>. Remove the f: in <f:layoutData> so that it matches with the parent's (default) namespace.
sap.ui.require([
"sap/ui/core/Core"
], Core => Core.attachInit(() => sap.ui.require([
"sap/ui/core/Fragment"
], Fragment => Fragment.load({
definition: `<f:GridContainer xmlns:f="sap.f" xmlns="sap.m">
<Label text="Label within GridContainer">
<layoutData>
<f:GridContainerItemLayoutData columns="3"/>
</layoutData>
</Label>
</f:GridContainer>`
}).then(control => control.placeAt("content")))));
<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m,sap.f,sap.ui.layout"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody"></body>
"Cannot add direct child without default aggregation defined for control sap.m.Label". Not sure what this means.
Within control definition, control developers can assign a default aggregation so that application developers can add children without having to put an aggregation name explicitly in the XML view definition. An example of this is sap.f.GridContainer. Its default aggregation is items.src Hence, you won't need to add <f:items> to add children there (See my code snippet above).
If, however, the control has no default aggregation and the child node name matches with none of the named aggregations, the XML processor will throw the above error.
The sap.m.Label and the other controls cannot be used inside sap.f.Gridcontainer directly. You'll need to place them inside <f:items> first.
From the documentation: https://sapui5.netweaver.ondemand.com/sdk#/api/sap.f.GridContainer%23overview
<f:GridContainer>
<f:layout>
<f:GridContainerSettings rowSize="5rem" columnSize="5rem" gap="1rem" />
</f:layout>
<f:layoutS>
<f:GridContainerSettings rowSize="4rem" columnSize="4rem" gap="0.5rem" />
</f:layoutS>
<f:items>
<GenericTile header="Sales Fulfillment">
<layoutData>
<f:GridContainerItemLayoutData rows="2" columns="2" />
</layoutData>
</GenericTile>
<w:Card manifest="url-to-manifest">
<w:layoutData>
<f:GridContainerItemLayoutData rows="6" columns="3" />
</w:layoutData>
</w:Card>
<Panel>
<layoutData>
<f:GridContainerItemLayoutData columns="4" />
</layoutData>
<Text text="Sales information" />
</Panel>
</f:items>
</f:GridContainer>