Cannot build custom widget following exact instructions on Crash course

0
A lot of errors, seen below. I do not have spaces on dir path, which seems to be a common cause of errors. My ShiftCalendarTS.xml file: <?xml version="1.0" encoding="utf-8"?> <widget id="automatech.shiftcalendarts.ShiftCalendarTS" pluginWidget="true" needsEntityContext="false" offlineCapable="true" supportedPlatform="Web" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd"> <name>Shift Calendar TS</name> <description></description> <icon> iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABp1BMVEUAAABV//9mzP9LtP9Ms/9Jtv9NsvdJsfpLtPpJsfdJsfhJsvhJsvdKsvdJsPhKsPhJsfdJsPhJsfdIsfhJsfdIsPdJsfhJsfhJsPhJsPhIsfhIsPdJsPdKsPdKsfdNsvdOsvdPs/dQs/dRtPdStPdTtPdUtfdWtvdXtvdauPdcuPdeufdeufhguvhiu/hju/hkvPhmvfhnvfhpvvhrv/huwPhvwfhxwfhywvhzwvh4xfl5xfl6xfl8xvl9xvl9x/mByPmCyfmFyvmGyvmJzPmKzPmLzfmNzvqPzvqQz/qT0PqU0PqU0fqX0vqY0vqa0/qe1fqg1vqj1/uk1/un2fup2vut2/uv3Puw3Puw3fuz3vu13/u23/u34Pu44Pu64fu64fy84vy94vy+4/y/4/zD5fzE5fzG5vzH5vzI5/zK6PzL6PzR6/zT7P3U7P3V7f3W7f3Y7v3Z7v3c8P3e8f3f8f3g8f3i8v3l8/3l9P3n9P3r9v7t9/7u9/7v+P7w+P7x+f7y+f70+v71+v74/P75/P76/f77/f78/f78/v79/v7+/v7////6dMsRAAAAG3RSTlMAAwURGxwhMTNic3SEh4iVp7XBzejt7vH5/f6PsMNWAAABsklEQVR4AWIYfGAUjIJRMAqYuYREJKWJAqLCPGwY+jnFpEkBEryMqPr5pEkFgkwo9kuTDviR/S9GhgFSHAgDuKXJAQIIA4TIMkAcEY4i0mQBVrgBkuQZwA43QJo8wIFhQEhEOIBQOutHJozDOP5Crp4e1RhkJ0tKGJFd6oNEdtmJyEIzpaZl5nrRZgaHM/2Pf5/vwXXfyagXgG93bwSAlEolowLMm9w83gibhXH2gKKVdD67gTnWjwCk+VVjMQS4suSnnjMLRVFc9sAHvAX2A9fySaXNBMbEZVUWscaHIMRuqwBgD8hDEbnsRmfjUKJkAQZGCTlO/xWBwIADQLIZBlY441MvfoF1xlFS/4fy+bzXKh4dgNJE7L3eh3tmtuWa+AMcMIY3dgUvZQpGEYmMw2kD7HC+R29UqyoXLaBd0QZxzgXgikLLDSqJTKU5HOcS0MsbA9jPqtwCRvXm2eorBbNIJBw3KJ9O4Yl+AAXdnyaLt7PWN3jRWLvzmAVp94zO5+n41/onfo/UpExxZqI0O7NQr0DhIq9Io7hQpbRYp7hiobRqo6ByFcNWuY6CUTAKRgEAo8X0lBD3V30AAAAASUVORK5CYII= </icon> <properties> <propertyGroup caption="Data Source"> <property key="shifts" type="datasource" isList="true" required="true"> <caption>Shifts</caption> <description>list of shift objects associated to the planning period</description> </property> <property key="start" type="attribute" dataSource="shifts"> <caption>Start Date attribute</caption> <description>start date attribute</description> <attributeTypes> <attributeType name="DateTime"/> </attributeTypes> </property> <property key="end" type="attribute" dataSource="shifts"> <caption>Start Date attribute</caption> <description>start date attribute</description> <attributeTypes> <attributeType name="DateTime"/> </attributeTypes> </property> <property key="employeeName" type="attribute" dataSource="shifts"> <caption>Employee Name</caption> <description>Name of the employee that will take on this shift</description> <attributeTypes> <attributeType name="String" /> </attributeTypes> </property> <property key="editShift" type="action" dataSource="shifts"> <caption>Shift New Edit page</caption> <description></description> </property> <property key="culture" type="enumeration" required="true" defaultValue="nl_NL"> <caption>Culture</caption> <description></description> <enumerationValues> <enumerationValue key="nl_NL">The Netherlands</enumerationValue> <enumerationValue key="nl_BE">Belgium (Dutch)</enumerationValue> <enumerationValue key="fr_BE">Belgium (French)</enumerationValue> <enumerationValue key="fr_FR">France</enumerationValue> <enumerationValue key="de_DE">Germany</enumerationValue> <enumerationValue key="en_US">America</enumerationValue> <enumerationValue key="en_GB">United Kingdom</enumerationValue> </enumerationValues> </property> </propertyGroup> </properties> </widget> After creating that file, I ran npm run build (differently from what the course indicates: run npm build, which is obviously wrong). I am clueless. If I try to import the widget in Studio anyways, I get:   EDIT   In reply to Eric’s comment: I thought it had to do with matching the TSX. The thing is the course tells you to run the build before telling you to even open the TSX for edition. Anyways, in the mean time I did edit my TSX according to the following steps in the course and so the log of errors changed. Below is my ShiftCalendarTS.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; } } And below is the full build log (in 2 prints):
asked
3 answers
0

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:

  • Edit package.json and change the pluggable-widgets tools dependency to: "@mendix/pluggable-widgets-tools": "8.10.2",
  • Run npm install
  • Run npm run build
answered
0

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"
  }
  • Your npm install command was not indicated in the course :(

 

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… :( )

answered
0

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:

answered