Popup customization error

[melissacinta]

Version

Test Environment

windows 10,
chrome

Current Behavior

i followed this issue #884 and bundled the results successfully.
then i place the content of the dist folder in a folder in my root directory called external

the external/wrapperCalendar is a copy of @toastui/react-calendar
i then called it in my CalendarPage.tsx

  import React, {HTMLAttributes, FC, LegacyRef} from 'react';
  import type {EventObject, Options} from '@toast-ui/calendar';
  import '@toast-ui/calendar/dist/toastui-calendar.min.css';
  import 'tui-date-picker/dist/tui-date-picker.css';
  import 'tui-time-picker/dist/tui-time-picker.css';
  import Calendar from 'external/wrapperCalendar';
  
  export type TUICalendarProps = Options &
      EventObject & {
          height: string;
          view?: string;
          events?: Array<Record<string, string>>;
      } & HTMLAttributes<HTMLElement>;
  
  type TUICalendarPropsWithRef = {
      forwardedRef: LegacyRef<Calendar>;
  } & TUICalendarProps;
  
  const CalendarPageWrapper: FC<TUICalendarPropsWithRef> = (props) => {
      return <Calendar {...props} ref={props.forwardedRef} />;
  };
  
  export default CalendarPageWrapper;

called it in my schedule page and got this error

after which I installed tui-code-snippet but still got the same error
at this point I don't know what I could be doing wrong

Expected Behavior

calendar renders properly without bugs and I can see the attendee form field

[adhrinae]

@melissacinta

It looks like you're customizing v1.

I'm not sure about the root cause, however, I can say some packages are handled as external dependencies while bundling.
So try to comment out the external dependency config and bundle it again.

I tried to use the bundled file with the Vite project, and it didn't work well because Vite works on ES modules as default. Even if I had applied the dependency pre-bundling, it still doesn't recognize the bundle file.

But it worked with the Webpack-based dev environment(e.g. create-react-app).

[melissacinta]

hi @adhrinae please how do i edit add assignees field to the popup form in v2 i actually did not realise that i was working with the old version I just went with directions i found also I am working with nextjs

[adhrinae]

@melissacinta

You can add your own input components inside this file. It's built on Preact, so it doesn't have much difference from React (since you're working with Next.js).

Then there's a onSubmit function to gather all form values and pass to the calendar's instance event handler.

[melissacinta]

thanks i will try that out