Object Template ReferenceError: Cannot access before initialization

[emrahc]

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.21

Anything else?

I dont know what to do. Any help would be appreciated.

[heath-freenome]

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

[emrahc]

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.

[heath-freenome]

@emrahc So is your issue fixed?