** Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of SwitchButton
**
export
import React from 'react';
import { SwitchUnstyled } from '@mui/material';
import { SwitchRoot } from './SwitchButton.styled';
type Props = {
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
checked: boolean;
};
export const SwitchButton: React.FC<Props> = ({ onChange, checked }) => {
return <SwitchUnstyled checked={checked} onChange={onChange} component={SwitchRoot} />;
};
import
import React, { useCallback } from 'react';
import {
backTextCSS,
stepShiftTextCSS,
stepTitleCSS,
Styled,
switchButtonBoxCSS,
switchButtonLongTextCSS,
switchButtonTextCSS,
} from './WorkingDayHeader.styled';
import { Grid, Typography } from '@mui/material';
import SvgBackIcon from '../../../../../../common/IconComponents/SvgBackIcon';
import { Controller, useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { yup } from '../../../../../../app/core';
import { SwitchButton } from '../../../../../../common/newUi/SwitchButton';
import { useSpotConfigurationCtx } from '../../../../containers/SpotConfigurationCtx';
import { HeaderBreadcrumbs } from '../../../../../../app/newContainers';
import { heightInheritCSS, mb, mt } from '../../../../../../common/common.styled';
import { TitleStep } from '../../../TitleStep/TitleStep';
import { SwitchSelectors } from '../../../../../../common/newUi/SwitchSelectors';
type StandardShiftData = {
standardShift: boolean;
};
const defaultValues = {
standardShift: false,
};
const schema = yup.object().shape({
standardShift: yup.boolean().required(' '),
});
const options = [
{
label: 'Будни',
value: 'allDay',
selectedBackgroundColor: '#8891A7',
selectedFontColor: '#ffffff',
},
{
label: 'Выходные',
value: 'weekdays',
selectedBackgroundColor: '#8891A7',
selectedFontColor: '#ffffff',
},
];
type Props = {
setAreWorkingDays: (arg: boolean) => void;
};
export const WorkingDayHeader: React.FC<Props> = ({ setAreWorkingDays }) => {
const { wizardContext, onGoNext } = useSpotConfigurationCtx();
const {
handleSubmit,
control,
reset,
watch,
formState: { errors },
} = useForm<StandardShiftData>({ defaultValues, resolver: yupResolver(schema) });
const moneyDayOn = 7400;
const moneyDayOff = 0;
const handleGoBack = useCallback(() => {
onGoNext({ ...wizardContext, stepName: 'WORKING_HOURS' });
}, [onGoNext, wizardContext]);
const handleSwitchChange = useCallback(() => {
setAreWorkingDays((prevValue) => !prevValue);
}, [setAreWorkingDays]);
return (
<Styled.Root>
<Grid container css={heightInheritCSS} justifyContent="space-between">
<Grid item xs={12}>
<HeaderBreadcrumbs />
</Grid>
<Grid item xs={12} css={[mb(40), mt(40)]}>
<Styled.Header>
<TitleStep title={'Рабочий день'} numberStep={2} numberProgress={50}>
<Grid css={stepTitleCSS} container onClick={handleGoBack} alignItems="center">
<Grid item xs={3} css={mt(4)}>
<SvgBackIcon />
</Grid>
<Grid item xs={9}>
<Typography css={backTextCSS}> Назад</Typography>
</Grid>
</Grid>
</TitleStep>
{/* <Typography css={stepShiftTextCSS}>Укажи смены работы персонала или создай новую</Typography> */}
<Grid container spacing={2} css={mt(20)} justifyContent="space-between">
<Grid item xs={5}>
<Controller
name="standardShift"
control={control}
render={({ field: { value, onChange } }) => (
<Grid css={switchButtonBoxCSS} container>
<Grid item xs={1}>
<SwitchButton onChange={onChange} checked={value} />
</Grid>
<Grid item xs={11}>
{value ? (
<Typography
css={switchButtonTextCSS}
>{`Стандартный набор смен включен: ${moneyDayOn} рублей / день`}</Typography>
) : (
<Typography
css={switchButtonLongTextCSS}
>{`Стандартный набор смен выключен. Текущие смены: ${moneyDayOff} рублей / день `}</Typography>
)}
</Grid>
</Grid>
)}
/>
</Grid>
<Grid item xs={5}>
<Grid container justifyContent="flex-end">
<Grid item>
<Styled.ButtonSwitch>
<SwitchSelectors
onChange={handleSwitchChange}
options={options}
background={'#fff'}
fontColor={'#8891A7'}
/>
</Styled.ButtonSwitch>
</Grid>
</Grid>
</Grid>
</Grid>
</Styled.Header>
</Grid>
</Grid>
</Styled.Root>
);
};
import { SwitchUnstyled } from '@mui/material';
, либоimport { SwitchRoot } from './SwitchButton.styled';
один из двух -undefined
undefined
. Ты должен найти какой именно компоненты ты неправильно импортируешь и импортировать его правильно