Object Template ReferenceError: Cannot access before initialization
emrahc opened this issue · comments
Prerequisites
- I have searched the existing issues
- I understand that providing a SSCCE example is tremendously useful to the maintainers.
- I have read the documentation
- Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.
What theme are you using?
material-ui
Version
5.13.2
Current Behavior
I have an object template
export const DetailsTemplate = (
props: ObjectFieldTemplateProps
) => {
console.log(
"detailsFormData",
props,
props.properties[0].content.props.formData
);
return (
<Grid
container
spacing={5}
// alignItems="center"
// marginY={1}
>
<Grid item xs={12}>
<Typography variant="subtitle1">
{props.description}
</Typography>
</Grid>
<Grid item xs={12} sm={6}>
{props.properties[0].content}
</Grid>
<Grid item xs={12} sm={6}>
{props.properties[1].content}
</Grid>
{props.properties[0].content.props.formData ? (
<Grid item xs={12} sm={12}>
{/* <Information /> */}
<Information
index={0}
id={props.properties[0].content.props.formData}
/>
</Grid>
) : null}
{props.properties[1].content.props.formData ? (
<Grid item xs={12} sm={12}>
<Information
index={1}
id={props.properties[1].content.props.formData}
/>
</Grid>
) : null}
{props.properties.slice(2).map((element, i) => {
return (
<>
<Grid item xs={12} sm={6}>
{element.content}
</Grid>
{/* <Information element={element.content} i={i} />) */}
</>
);
})}
</Grid>
);
};
Below schema and uischema
export const detailsSchema: RJSFSchema = {
type: "object",
title: "",
description: "Aşağıdaki Alanları Doldurunuz ",
properties: {
person: {
type: "string",
title: "Kişi",
},
company: {
type: "string",
title: "Şirket",
},
date: {
type: "string",
title: "Muayene Tarihi",
},
},
required: ["person", "company", "date"],
};
export const uiSchema: UiSchema = {
details: {
"ui:ObjectFieldTemplate": DetailsTemplate,
date: {
"ui:widget": "date",
},
person: {
"ui:widget": (props: WidgetProps) => {
return (
<AutocompletePerson
{...props}
value={props.value}
defaultValue={props.value}
personCompanies={true}
onChange={props.onChange}
/>
);
},
},
company: {
"ui:widget": (props: WidgetProps) => {
return (
<AutoCompleteCompanyExam
onChange={props.onChange}
defaultValue={props.value}
personCompany={true}
personalView={true}
examinationView={true}
/>
);
},
},
}
}
I use this setup many places in my without problem. But in some for got error and crashes the app
Server Error
ReferenceError: Cannot access 'DetailsTemplate' before initialization
⨯ ReferenceError: Cannot access 'DetailsTemplate' before initialization
at Module.DetailsTemplate (webpack-internal:///./src/views/apps/health/FormTemplates/DetailsTemplate.tsx:4:62)
at eval (webpack-internal:///./src/views/apps/health/physicalexam/periodic/FormElements/uiSchema.tsx:36:95) {
page: '/apps/health/physicalexam/policlinic/null'
}
Expected Behavior
It shouldn't crash randomly.
Steps To Reproduce
It's impossible to reproduce behavior.
Environment
- OS:Macos 14.3.1
- Node:21.5.0
- yarn: 1.22.21Anything else?
I dont know what to do. Any help would be appreciated.
I'm not too sure how to help you, but it seems like you have a webpack configuration error somewhere where DetailsTemplate isn't in the scope (tree-shaken out perhaps) under a certain circumstance
It worked after changed
const DetailedTemplate =>() to function DetailsTemplate()
I also had same problem with schemas defined with const i made them var. This only happens with RJSF.