web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / PCF Control giving err...
Power Apps
Unanswered

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

(0) ShareShare
ReportReport
Posted on by 36

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.

 

SumitThakran_0-1592824471412.png

 

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

I have the same question (0)
  • Diana Birkelbach Profile Picture
    3,072 Most Valuable Professional on at

    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 Profile Picture
    1,039 on at

    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

  • Dynamics 365 Sumit Thakran Profile Picture
    36 on at

    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 

    SumitThakran_0-1592895949463.png

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

     

    SumitThakran_1-1592895989096.png

     

    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

  • Dynamics 365 Sumit Thakran Profile Picture
    36 on at

    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 Profile Picture
    1,400 on at

    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?

     

  • Dynamics 365 Sumit Thakran Profile Picture
    36 on at
  • Dynamics 365 Sumit Thakran Profile Picture
    36 on at

    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

     

  • Dynamics 365 Sumit Thakran Profile Picture
    36 on at

    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 Profile Picture
    1,039 on at

    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/

     

     

  • Dynamics 365 Sumit Thakran Profile Picture
    36 on at

    Hi Scott,

     

    Thanks for your comment.

     

    Ya i will try to set it to id of div in PCF component.

     

    Thanks

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the March Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
Vish WR Profile Picture

Vish WR 633

#2
11manish Profile Picture

11manish 588

#3
Valantis Profile Picture

Valantis 457

Last 30 days Overall leaderboard