PCF Control giving error when its added in Form on Dynamics 365 Platform

[SumitThakran]

Hi 

I have developed custom PCF Control in Typescript . I have used some React JS code to open React-Modal as popup window in Control Button Click.

This custom PCF Control is running fine when i am running it locally i.e from Visual Studio code. But when i deployed PCF Control to my Dynamics 365 environment.

And tried to access control in CRM Form then getting below error show in screenshot.

Basically i have used React js inside my Typescript project. I have used React-Modal component for showing popup window .

i did some analysis and found that when i remove Modal tsx file from my PCF Control and deployed simple component on Dynamics 365 platform then this error is not coming .

Can anyone tell me what i am doing wrong while calling Modal component or in its contructor.

So below is my piece of code i wrote it down to call my Modal component. Basically passing one parameter to Modal Component.

<MyModal inputABN = {this.state.inputValue}/>

And below is constructor of My Modal component.

export class MyModal extends React.Component<ModalProps, any> {
constructor (props: ModalProps) {
super(props);
this.state = {
showModal: false , inputABN: props.inputABN
};
............................

Any help will be appreciated .

Thanks

[DianaBirkelbach]

Hi @SumitThakran , 

I have the feeling that there are some missing pieces in understanding your issue.

I don't know what you mean by "I tried to access the control in CRM Form". The only way you can interact with the PCF control from a form is by changing the value, show/hide, enable/disabled, the same as you work with every OOB control.

The PCF control is bounded to one control on a form, and one or more attributes from your entity. 

In order to open modal content, you have there two possibilities from inside the PCF component:

 - you can open your PCF component full-screen, by using control.mode.setFullScreen()

 - you can use the PopupService to open further dialogs: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/popupservice

It case this doesn't help, maybe you can tell more, about how you try to access the PCF from the Form.

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

[ScottDurow]

Usually this error is caused by the webpack complication failing and so your control's index.js class not being available at runtime.

I suspect that the reason it is working when you remove some part of the code - is that there is an error in the code (syntax error, missing import etc.) that is preventing the code from building.

Look carefully at the output when you run npm start

Hope this helps

[SumitThakran]

Hi Diana,

Below is my CRM Form on which i added my PCF Control to text field i.e ABN and this PCF control is also bounded with this entity attribute. You can refer below screenshots 

When i click on error that error window comes which i have already shared in my above message.

This PCF Control not working in Dynamics 365 but when i run it locally in VS Code. There its working fine.

So not sure what's the problem

Thanks

[SumitThakran]

Hi Scott,

If webpack compilation failing and index.js not available at runtime , then why i did not got any type of error while running this PCF Control in VS Code.

In VS Code , its running fine and there is no error coming.But when this control is imported in Dynamics and added in Form then its not working.

Also you mentioned to watch npm start . below are lines generated in VS code when i run command :- npm start

PS C:\Sumit\Desktop Files\CRM\PCF\Controls\ABNVerificationControl> npm start

> pcf-project@1.0.0 start C:\Sumit\Desktop Files\CRM\PCF\Controls\ABNVerificationControl
> pcf-scripts start

[12:44:39] [start] Initializing...
[12:44:39] [start] Validating manifest...
[12:44:39] [start] Validating control...
[12:44:43] [start] Generating manifest types...
[12:44:43] [start] Compiling and bundling control...
[BABEL] Note: The code generator has deoptimised the styling of C:\Sumit\Desktop Files\CRM\PCF\Controls\ABNVerificationControl\node_modules\react-dom\cjs\react-dom.development.js as it exceeds the max of 500KB.
[Webpack stats]:
Hash: 820fdf6cb7f27cf48276
Version: webpack 4.42.1
Time: 31575ms
Built at: 06/23/2020 12:45:15 PM
Asset Size Chunks Chunk Names
bundle.js 4.96 MiB main [emitted] main
Entrypoint main = bundle.js
[./ABNVerification/ABNControl.tsx] 3.38 KiB {main} [built]
[./ABNVerification/ABNModal.tsx] 3.17 KiB {main} [built]
[./ABNVerification/index.ts] 3.6 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-0.js] 3.63 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-1.js] 3.5 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-10.js] 3.87 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-11.js] 3.87 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-12.js] 4.09 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-13.js] 4.09 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-14.js] 3.88 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-15.js] 3.98 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/index.js] 1.54 KiB {main} [built]
[./node_modules/react-dom/index.js] 1.32 KiB {main} [built]
[./node_modules/react/index.js] 189 bytes {main} [built]
[./node_modules/util/util.js] 18.6 KiB {main} [built]
+ 833 hidden modules
[12:45:15] [start] Generating build outputs...
[12:45:15] [start] Starting control harness...

Starting control harness...

Mapping / to "C:\Sumit\Desktop Files\CRM\PCF\Controls\ABNVerificationControl\node_modules\pcf-start"

Serving "C:\Sumit\Desktop Files\CRM\PCF\Controls\ABNVerificationControl\out\controls\ABNVerification" at http://127.0.0.1:8181

Ready for changes

can you point out any issue in webpack compilation that could help me to sort this issue out.

Thanks

[ben-thompson]

Looking at that npm start output I see no mention of ABNVerifysPCF.ABNVerifys or even ABNVerifys are you sure you the issue isn't either

a) a namespace issue (the error message references ABNVerifysPCF yet the start output references ABNVerification and doesn't reference ABNVerifysPCF

b) a missing import within the index.ts file?

[SumitThakran]

Hi Ben,

Oh sorry its my mistake. Actually i created another duplicate project "ABNVerification" to do some R&D at my end for fixing this issue.

So i might have shared npm start output of another duplication project. But i can share npm start output of original project too "ABNVerifys" but i checked that too and its output is same too.

So i think namespace issue is not there.

you mentioned that i might be missing import in index.ts file. Let me explain my file hierarchy so that you might get some idea about files.

There are three files in my PCF Control project.

a) index.ts 

b) ABNControl.tsx

c) ABNModal.tsx

Obviously index.ts file is first one to start with. Index.ts file import my ABNControl.tsx file and then ABNControl.tsx file import third file i.e "ABNModal.tsx"

Second file is having one textbox and one button . On click on this button , it will invoke my third file . Third file is basically React Modal component which will open a pop up window and show some more details.

I did some hit and trial methods at my end to solve this issue and found that invoking constructor issue is coming due to third file only. Becuz when i remove third file from my PCF Control and deploy it on Dynamics 365. Then this error does not come But if i include third file then this error comes in Dynamics 365 .

So i think there is something wrong while invoking third file from second file. Which i am not able to figure it out.

Below is my piece of code in second file which invokes third file 

<MyModal inputABN = {this.state.inputValue}/>

Below is Third file which is basically Modal component and its constructor code

export interface IModalProps {

  inputABN?: string;

  onInputChanged?:(newValue:string)=>void;

};

export interface IModalState extends React.ComponentState,IModalProps{}

ReactModal.setAppElement('#app-root');

export class MyModal extends React.Component<IModalProps, IModalState> {

  constructor (props: IModalProps) {

    super(props);

    this.state = {

      showModal: false , inputABN: props.inputABN

    };

    this.handleOpenModal = this.handleOpenModal.bind(this);

    this.handleCloseModal = this.handleCloseModal.bind(this);

  }

.....................................................

Can you point out what i am doing wrong.

Thanks

[SumitThakran]

Hi Everyone,

FYI , my issue is sorted . Below line of code was not working in Dynamics 365 so i removed it and its working now.

ReactModal.setAppElement('#app-root');

I added this line of code becuz i was getting some warning message in console window. As now i have removed it so still i am getting warning message as shown below

webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./node_modules/warning/warning.js?:34 Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by setting `ariaHideApp={false}`

Can you anyone suggest line of code that will remove this warning message.

Thanks

[ScottDurow]

Looking at the docs - it seems that ReactModal attempts to hide the root app content when the modal dialog is open. I don't think this is going to work with PCF because you cannot access any nodes outside of the PCF component.

You could set it to the id of a div in your PCF component - but I that wouldn't achieve what it is trying to do.
http://reactcommunity.org/react-modal/accessibility/