rwilson504 / PCFControls

Reusable PowerApps Control Framework (PCF) controls.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Calender control local development issue

CreativeAcer opened this issue · comments

commented

When i use the 'npm run start' command to test the control locally i receive the following error in the browser console : Invariant Violation: Minified React error 31; The calender appears for a split second and then dissapears.

Part of the console log
"Invoked method loadNextPage on Paging interface. Parameters: 5000.
index.ts:99 updateView: dataSet.sortedRecordIds.length: 3
CalendarControl.tsx:231 asyncCalendarData: dataSet.sortedRecordIds.length: 3
CalendarControl.tsx:535 getCalendarData: eventData.length: 0
react-dom.production.min.js:117 Invariant Violation: Minified React error 31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=Sun%20Dec%2030%202018%2000%3A00%3A00%20GMT%2B0100%20(Central%20European%20Standard%20Time)&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at pb (http://127.0.0.1:8181/lib/react-dom.production.min.js:12:454)
at n (http://127.0.0.1:8181/lib/react-dom.production.min.js:13:221)
at Ac (http://127.0.0.1:8181/lib/react-dom.production.min.js:70:369)
at http://127.0.0.1:8181/lib/react-dom.production.min.js:80:190...."

error detail
Which gives me the following information on the React site: Objects are not valid as a React child (found: Sun Dec 30 2018 00:00:00 GMT+0100 (Central European Standard Time)). If you meant to render a collection of children, use an array instead.

'npm run build' passes without any issues.

Am i missing something ?

I took a look and it appears this issue is because the dataset which is being supplied by the test harness does not include any date/time fields. Honestly i never use the test harness for any local dev. It's great for simplistic controls but as soon as you have something that goes beyond that it's really not helpful. Instead what i would do is utilize Fiddler AutoResponder to do you local development.

Here is a great article from Scott Durow on how to set up Fiddler for this.
http://www.develop1.net/public/post/2020/04/30/debugging-canvas-app-pcf-components-with-fiddler

Once you follow Scott's instructions you can set up your Fiddler instance to look like what i have below. The first two rules let me debug in Canvas and the last two allow me to debug in a Model app.

image

Just a quick update on this. I'm working right now to update the PCF npm packages to the new 1.3.1 version and in doing so I ran the test harness and it works now. This will be released soon.

Still though use the Fiddler debugging it will make your dev life so sooo much faster :)