Looks like a bug in the latest widget toolkit that was just released. It doesn’t happen on MacOS, only on Windows. I’ll submit an issue to the team. In the meantime, here’s a temporary solution:
"@mendix/pluggable-widgets-tools": "8.10.2",
npm install
npm run build
Hey Eric, thanks for the reply.
Mine was as below (seems like I’m on a previous version):
"devDependencies": {
"@mendix/pluggable-widgets-tools": "^8.10.1",
"@types/big.js": "^4.0.5",
"@types/classnames": "^2.2.4",
"@types/react": "~16.9.0",
"@types/react-dom": "~16.9.0"
}
I wonder why the example came with that ^ character… Anyways, I changed to the following, as you indicated:
"devDependencies": {
"@mendix/pluggable-widgets-tools": "8.10.2",
"@types/big.js": "^4.0.5",
"@types/classnames": "^2.2.4",
"@types/react": "~16.9.0",
"@types/react-dom": "~16.9.0"
}
Now I get the following (it caught my attention that it is referencing src/components/CalendarContainer which I’m lacking):
EDIT
As Eric indicated the build problem has to do with missing reference, here is a pic indeed showing that on VS Code:
Problem is I don’t know how to solve that (expected the Crash course wouldn’t lead me into that… :( )
After creating CalendarContainer.tsx, according to 11.7 Component files - TypeScript version:
import { Component, createElement, ReactNode } from "react";
import { Calendar, momentLocalizer, View } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";
const localizer = momentLocalizer(moment);
const weekView: View[] = ['week'];
interface CalendarProps {
shifts?: CalendarEvent[];
culture: string;
}
export interface CalendarEvent {
id: string;
title: string;
allDay: boolean;
desc: string;
start?: Date;
end?: Date;
onSelectEvent?: () => void;
}
export class CalendarContainer extends Component<CalendarProps> {
render(): ReactNode {
return(
<Calendar
localizer={localizer}
selectable
step={15}
timeslots={8}
views={weekView}
defaultView="week"
defaultDate={new Date()}
scrollToTime={new Date()}
events={this.props.shifts}
showMultiDayTimes={true}
culture={this.props.culture}
onSelectEvent={this.onSelectEvent.bind(this)}
/>
);
}
onSelectEvent(event: CalendarEvent) {
if (event.onSelectEvent !== undefined) {
event.onSelectEvent();
}
}
}
...and also following 11.7.2, changing ShiftCalendar.tsx:
import { Component, ReactNode, createElement } from "react";
import { ShiftCalendarTSContainerProps } from "../typings/ShiftCalendarTSProps";
import { CalendarContainer, CalendarEvent } from "./components/CalendarContainer";
import "./ui/ShiftCalendarTS.css";
export default class ShiftCalendarTS extends Component<ShiftCalendarTSContainerProps>{
render(): ReactNode {
return <CalendarContainer shifts={} />;
}
transformEvents(): CalendarEvent[] {
if(this.props.shifts !== undefined && this.props.shifts.items !== undefined) {
return this.props.shifts.items.map(item => {
if (this.props.editShift !== undefined) {
return {
id: item.id as string,
title: this.props.employeeName(item).value,
allDay: false,
start: this.props.start(item).value,
end: this.fixEndDate(item),
desc: this.props.employeeName(item).value,
onSelectEvent: this.props.editShift(item)?.execute
}
}
}).filter(item => !!item) as CalendarEvent[];
}
return [];
}
fixEndDate(item: ObjectItem): Date {
const date: Date = this.props.end(item).value as Date;
date.setSeconds(date.getSeconds() - 1);
return date;
}
}
I have this lint error:
which leads to build failure: