Showing results for 
Search instead for 
Did you mean: 
Helper I
Helper I

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



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) {
this.state = {
showModal: false , inputABN: props.inputABN



Any Help will be appreciated





Accepted Solutions

Hi! As I mentioned early on the first reply. Remove this piece of code.




Because you don't have an HTML to set default <div> for the app, the <div> is given when the control is initialized. Like you create a react page project. When I remove this code works fine. 


If works, please mas as solution

View solution in original post

Advocate II
Advocate II


have you created an interface that extends ComponentState from react?


for example:

export interface ClassState extends React.ComponentState{}

export interface IExampleProps {
  prop1?: number;
  prop2?: (newValue: number) => void;
export default ComponentClass extends<IExampleProps ,ClassState>{
   public render(): JSX.Element{
      return();//here put the JSX content

Hi Michael,


Thanks for you reply.


I have tried by creating interface also for props and state parameter in modal class.

Below is my Code for modal class .


export interface IModalProps {
  inputABN?: string;
export interface IModalState extends React.ComponentState,IModalProps{}

export class MyModal extends React.Component<IModalProps, IModalState> {
  constructor (props: IModalProps) {
    this.state = {
      showModal: false , inputABN: props.inputABN

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
And this is how i am calling Modal component in another file.
<MyModal inputABN = {this.state.inputValue}/>
Can you point out whats wrong here in my code.

why are put this loosely ReactModal.setAppElement('#app-root'); ?


in the react with PCF, the root control is the container that is given on the Init().

Can you share you index.ts?

I Create one for you. Can you test, please?


Create File ModalControl.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";

export interface ShowModalState
    extends React.ComponentState {
        show: boolean;
export class ShowModal extends React.Component<{}, ShowModalState>{
    public state:ShowModalState;

    constructor(props: any) {
        this.state = {show:false};
        this.onClickHandler = this.onClickHandler.bind(this);

    public onClickHandler(evt: React.MouseEvent) {
        this.setState(prev => ({
            show: !

    public render(): JSX.Element{
        const { show } = this.state;
        const styles = show ? "modal display" : "modal";
        return (
            <div id="modal-root">
            <button className="btn" onClick={this.onClickHandler} type="button">open modal</button>
                <div id="modal" className={styles}>
                    <div className="modal-content">
                        <div className="modal-header"><span role="button" onClick={this.onClickHandler} className="btn-close">&times;</span>
                            <h2>Modal Header</h2>
                        <div className="modal-body">
                        <div className="modal-footer">


Create a CSS file Modal.css

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 50;
    top: 0;
    width: 50%;
    height: 50%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    border: #fff solid 1px;

.display {
    display: block;

.modal-header {
    padding: 2px 16px;
    background-color: #742774;
    color: white;

.modal-body {
    padding: 2px 16px;

.modal-footer {
    padding: 2px 16px;
    background-color: #742774;
    color: white;
    margin-top: 25%;

*::before {
    box-sizing: inherit;


Now add on the index.ts

//Import the React and the control
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ShowModal} from "./ModalControl"

//add a property on the main class
private _container: HTMLDivElement;

//change the init

public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
		this._container = container;
		// Add control initialization code

//change the updateiew
public updateView(context: ComponentFramework.Context<IInputs>): void
		// Add code to update control view
		ReactDOM.render(React.createElement(ShowModal, {}), this._container);

Change on Destroy
public destroy(): void
		// Add code to cleanup control if necessary


Check if this could help you.


Here is the result of my code.



Hi Michael,


Thanks for your effort. Really appreciate it.


I tried your code and its working fine . But i can see that you have used 'react-dom' for modal component where as i have used 'react-modal' for mine code. Also you have not passed any props from index.ts to modalcontrol.tsx file where as i am passing one parameter value and i think thats where mine code is not working.


I am attaching my PCF Control files in the attachment as an zip. There are 4 files as mentioned below

a) index.ts

b) ABNControl.tsx

c) ABNModal.tsx

d) ABNModal.css

FYI , Index.ts file is importing ABNControl.tsx file which is rendering input textbox and then importing ABNModal.tsx file which is passing this input textbox value as props to ABNModal.tsx file.

ABNModal.tsx file is having one button on click on which it will open Modal popup and will show that input textbox value.

Thats what i want to achieve for now. 


Can you check my files and let me know where my code is wrong . 


Any help will be appreciated.





Hi! As I mentioned early on the first reply. Remove this piece of code.




Because you don't have an HTML to set default <div> for the app, the <div> is given when the control is initialized. Like you create a react page project. When I remove this code works fine. 


If works, please mas as solution

Hi Michael,


Thanks for your help.


After removing that line of code , it was working fine in Dynamics 365 too.


Just to clarify , i added that piece of code it was giving me warning message in Console window.

Now i have removed it , still its giving that warning message as show in below screenshot



can you suggest any code that will remove this warning.




Helpful resources


Super User of the Month | Drew Poggemann

As part of a new monthly feature in the Community, we are excited to share that Drew Poggemann is our featured Super User for the month of February 2024. If you've been in the Community for a while, we're sure Drew's name is familiar to you, as he is one of our most active contributors--he's been a Super User for five consecutive seasons!   Since authoring his first reply 5 years ago to his 514th solution authored, Drew has helped countless Community members with his insights and expertise. In addition to being a Super User, Drew is also a User Group leader and a Microsoft MVP. His contributions to our Super User sessions and to the new SUIT program are always welcome--as well as his sense of humor and fun-loving way of sharing what he knows with others.   When Drew is not solving problems and authoring solutions, he's busy overseeing the Solution Architecture team at HBS, specializing in application architecture and business solution strategy--something he's been doing for over 30 years. We are grateful for Drew and the amazing way he has used his talent and skills to help so many others in the Community. If you are part of the SUIT program, you got to hear some great tips from Drew at the first SUIT session--and we know he still has much more to share!You can find him in the Community and on LinkedIn. Thank you for all you do, Drew!

Announcing Power Apps Copilot Cookbook Gallery

We are excited to share that the all-new Copilot Cookbook Gallery for Power Apps is now available in the Power Apps Community, full of tips and tricks on how to best use Microsoft Copilot as you develop and create in Power Apps. The new Copilot Cookbook is your go-to resource when you need inspiration--or when you're stuck--and aren't sure how to best partner with Copilot while creating apps.   Whether you're looking for the best prompts or just want to know about responsible AI use, visit Copilot Cookbook for regular updates you can rely on--while also serving up some of your greatest tips and tricks for the Community. Our team will be reviewing posts using the new "Copilot Studio" label to ensure we highlight and amplify the most relevant and recent content, so you're assured of high-quality content every time you visit. If you share a post that gets featured in the curated gallery, you'll get a PM in the Community to let you know!The curated gallery is ready for you to experience now, so visit the new Copilot Cookbook for Power Apps today: Copilot Cookbook - Power Platform Community. We can't wait to see what you "cook" up!      

Celebrating a New Season of Super Users with Charles Lamanna, CVP Microsoft Business Applications

February 8 was the kickoff to the 2024 Season One Super User program for Power Platform Communities, and we are thrilled to welcome back so many returning Super Users--as well as so many brand new Super Users who started their journey last fall. Our Community Super Users are the true heroes, answering questions, providing solutions, filtering spam, and so much more. The impact they make on the Communities each day is significant, and we wanted to do something special to welcome them at our first kickoff meeting of the year.   Charles Lamanna, Microsoft CVP of Business Applications, has stressed frequently how valuable our Community is to the growth and potential of Power Platform, and we are honored to share this message from him to our 2024 Season One Super Users--as well as anyone who might be interested in joining this elite group of Community members.     If you want to know more about Super Users, check out these posts for more information today:    Power Apps: What is A Super User? - Power Platform CommunityPower Automate: What is A Super User? - Power Platform Community Copilot Studio: What is A Super User? - Power Platform Community Power Pages: What is A Super User? - Power Platform Community

February 2024 User Group Update: Welcoming New Groups and Highlighting Upcoming Events

It's a new month and a brand-new year, which means another opportunity to celebrate our amazing User Groups!Each month, we highlight the new User Groups that have joined the community. It's been a busy season for new groups, because we are thrilled to welcome 15 New User Groups! Take a look at the list below, shared by the different community categories. If your group is listed here, give this post a kudo so we can celebrate with you!   We love our User Groups and the difference they make in the lives of our Community! Thank you to all the new User Groups, new User Group leaders--we look forward to hearing about your successes and the impact you will leave!   In addition to our monthly New User Group spotlight, it's a great time to share some of the latest events happening in our User Group community! Take a look at the list below to find one that fits your schedule and need! There's a great combination of in-person and virtual events to choose from. It's a great time of year to connect and engage with User Groups both locally and online. Please Welcome Our NEW User Groups   Power Platform: Heathcare Power Platform User Group Power Platform Connect Hub Power Platform Usergroup Denmark Mexico Norte- Power Platform User Group Pune Power User Group Sudbury Power Platform User GroupMicrosoft User Group GhanaMPPBLR - Microsoft Power Platform Bengaluru User Group Power Apps:   Myrtle Beach Power Platform User GroupAnanseTechWB PowerApps Copilot Studio: Pathfinders Power Platform Community Dynamics365: Cairo, Egypt MSD 365 Business Central/NAV/F&O User GruopMS Dynamics 365 Business Central LatamCincinnati OH D365 F&O User Group February User Group Events February 2024 Cleveland Power Platform User GroupPortallunsj - Februar 2024Indiana D365/AX February User Group MeetingQ1 2024 KC Power Platform and Dynamics 365 CRM Users Group 

Super Users 2024 Season One is Here!

   We are excited to announce the first season of our 2024 Super Users is here! Our kickoff to the new year welcomes many returning Super Users and several new faces, and it's always exciting to see the impact these incredible individuals will have on the Community in 2024! We are so grateful for the daily difference they make in the Community already and know they will keep staying engaged and excited for all that will happen this year.   How to Spot a Super User in the Community:Have you ever written a post or asked for help in the Community and had it answered by a user with the Super User icon next to their name? It means you have found the actual, real-life superheroes of the Power Platform Community! Super Users are our heroes because of the way they consistently make a difference in the Community. Our amazing Super Users help keep the Community a safe place by flagging spam and letting the Community Managers know about issues. They also make the Community a great place to find answers, because they are often the first to offer solutions and get clarity on questions. Finally, Super Users share valuable insights on ways to keep the Community growing, engaging, and looking ahead!We are honored to reveal the new badges for this season of Super Users! Congratulations to all the new and returning Super Users!     To better answer the question "What is a Super User?" please check out this article: Power Apps: What is A Super User? - Power Platform CommunityPower Automate: What is A Super User? - Power Platform Community Copilot Studio: What is A Super User? - Power Platform Community Power Pages: What is A Super User? - Power Platform Community

Did You Attend the Microsoft Power Platform Conference in 2022 or 2023? Claim Your Badge Today!

If you were one of the thousands of people who joined us at the first #MPPC Microsoft Power Platform Conference in 2022 in Orlando--or attended the second-annual conference in Las Vegas in 2023--we are excited to honor you with a special community badge! Show your support for #MPPC Microsoft Power Platform Conference this year by claiming your badge!         Just follow this link to claim your badge for attending #MPPC in 2022 and/or 2023: MPPCBadgeRequest    Want to earn your badge for 2024? Just keep watching our News & Announcements for the latest updates on #MPPC24.

Top Solution Authors
Top Kudoed Authors
Users online (4,864)