SPFX List View Command Set React Error Invariant 290

Question

SPFX List View Command Set React Error Invariant 290

Praveen Hooda 6

On clicking the custom List View Command Set I am opening a Panel. The issue is that it not opening a panel for the first time on loading of library view, but on refreshing the library view the command set works fine.

On checking the console logs I can see Microsoft files are throwing react error as below which goes away on refreshing the page:

sp-pages-assembly_en-au_7b476b5a94a514062b5d33d1b140ce97.js:1 Error: Minified React error #290; visit https://reactjs.org/docs/error-decoder.html?invariant=290&args\[\]=page-0 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Xl (sp-pages-assembly_en-au_7b476b5a94a514062b5d33d1b140ce97.js:1)
at d (sp-pages-assembly_en-au_7b476b5a94a514062b5d33d1b140ce97.js:1)
at m (sp-pages-assembly_en-au_7b476b5a94a514062b5d33d1b140ce97.js:1)
at sp-pages-assembly_en-au_7b476b5a94a514062b5d33d1b140ce97.js:1
at ea (sp-pages-assembly_en-au_7b476b5a94a514062b5d33d1b140ce97.js:1)
at Oo (sp-pages-assembly_en-au_7b476b5a94a514062b5d33d1b140ce97.js:1)
at ko (sp-pages-assembly_en-au_7b476b5a94a514062b5d33d1b140ce97.js:1)
at bo (sp-pages-assembly_en-au_7b476b5a94a514062b5d33d1b140ce97.js:1)
at po (sp-pages-assembly_en-au_7b476b5a94a514062b5d33d1b140ce97.js:1)
at sp-pages-assembly_en-au_7b476b5a94a514062b5d33d1b140ce97.js:1

Appreciate any help as this issue popped up since 3 days in Production with no change!

Regards,

Praveen Hooda

Amos Wu-MSFT 4,051 Reputation points

2020-09-03T06:09:25.987+00:00

@Praveen Hooda
Could you share the main code to reproduce your issue?Thank you.
And is this the issue in every browser?

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Praveen Hooda 6

Since, code is very lengthy I am sharing the entry points to open the Panel
Please suggest if I need to share further code. Thanks again for your time!
In ListView Command code OnExecute function is defined as:

switch (event.itemId) {
case COMMAND_NAME:

    let panelProps: IMemberRecordsPanelProps = {
      context: this.context,
      selectedDocuments: event.selectedRows,
      documentTypeOptions: docTypeOptions,
      configuration: this.properties
    };
    console.log(panelProps);
    // -----------
    // Load the Panel by creating a Div element and loading the panel in it
    // -----------
    const div = document.createElement('div');
    const element: React.ReactElement<{}> = React.createElement(MemberRecordsPanel, panelProps );
    ReactDOM.render(element, div);

    break;
  default:
    throw new Error('Unknown command');
}

}
PS:Limit on number of chars!

Praveen Hooda 6 Reputation points

2020-09-03T06:55:59.933+00:00
And in class MemberRecordsPanel extends React.Component

public render(): JSX.Element {

return (<Panel isLightDismiss={ false } isOpen={ true } type={PanelType.medium} onDismiss={this._onClosePanel} > </Panel>);

}
Amos Wu-MSFT 4,051 Reputation points

2020-09-14T04:12:53.95+00:00

Hi @Praveen Hooda ,
I am checking to see how things are going there on this issue. Please let us know if you would like further assistance.Thank you.
Amos Wu-MSFT 4,051 Reputation points

2020-09-17T06:35:52.057+00:00

Hi @Praveen Hooda ,
Do you have any update on this issue?
Oleksandr Ulianytskyi 1 Reputation point

2020-09-23T07:53:00.227+00:00

Recently I got the same issue without any code change in production.
The steps to reproduce are the same.

When you open site collection root page and then navigate to any document library and click on custom command set - an error occured Minified React error #290.

But when you refresh a document library view (o navigate to it directly) - everything is ok.

I guess it is something related to changes in modern list view and how scripts are loaded when page is refreshed partially (when you navigate from ordinary site page to document library)
Amos Wu-MSFT 4,051 Reputation points

2020-10-02T06:41:58.087+00:00

Hi @Praveen Hooda ,
I suggest you submit a ticket in admin center ,so our engineers could help you directly.

1 answer

Your answer

Amos Wu-MSFT 4,051 Reputation points

2020-09-03T06:09:25.987+00:00

@Praveen Hooda
Could you share the main code to reproduce your issue?Thank you.
And is this the issue in every browser?

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Praveen Hooda 6 Reputation points

2020-09-03T06:53:44.293+00:00

Since, code is very lengthy I am sharing the entry points to open the Panel
Please suggest if I need to share further code. Thanks again for your time!
In ListView Command code OnExecute function is defined as:

switch (event.itemId) {
case COMMAND_NAME:

let panelProps: IMemberRecordsPanelProps = { context: this.context, selectedDocuments: event.selectedRows, documentTypeOptions: docTypeOptions, configuration: this.properties }; console.log(panelProps); // ----------- // Load the Panel by creating a Div element and loading the panel in it // ----------- const div = document.createElement('div'); const element: React.ReactElement<{}> = React.createElement(MemberRecordsPanel, panelProps ); ReactDOM.render(element, div); break; default: throw new Error('Unknown command'); }

}
PS:Limit on number of chars!
Praveen Hooda 6 Reputation points

2020-09-03T06:55:59.933+00:00

And in class MemberRecordsPanel extends React.Component

public render(): JSX.Element {

return (<Panel isLightDismiss={ false } isOpen={ true } type={PanelType.medium} onDismiss={this._onClosePanel} > </Panel>);

}
Amos Wu-MSFT 4,051 Reputation points

2020-09-14T04:12:53.95+00:00

Hi @Praveen Hooda ,
I am checking to see how things are going there on this issue. Please let us know if you would like further assistance.Thank you.
Amos Wu-MSFT 4,051 Reputation points

2020-09-17T06:35:52.057+00:00

Hi @Praveen Hooda ,
Do you have any update on this issue?
Oleksandr Ulianytskyi 1 Reputation point

2020-09-23T07:53:00.227+00:00

Recently I got the same issue without any code change in production.
The steps to reproduce are the same.

When you open site collection root page and then navigate to any document library and click on custom command set - an error occured Minified React error #290.

But when you refresh a document library view (o navigate to it directly) - everything is ok.

I guess it is something related to changes in modern list view and how scripts are loaded when page is refreshed partially (when you navigate from ordinary site page to document library)
Amos Wu-MSFT 4,051 Reputation points

2020-10-02T06:41:58.087+00:00

Hi @Praveen Hooda ,
I suggest you submit a ticket in admin center ,so our engineers could help you directly.

Answer 1

Amos Wu-MSFT 4,051

I could not reproduce your issue.
My test code for your reference:

 import * as React from 'react';  
    import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';  
  
export default class CustomPanel extends React.Component<{}, {}> {  
  public render(): React.ReactElement<{}> {  
    return (  
      <div>  
        <Panel  
          isOpen={true}  
          type={ PanelType.smallFixedFar }  
          headerText='test'  
          closeButtonAriaLabel='Close'  
        >  
        <p>Hello Panel!</p>  
        </Panel>  
      </div>  
    );  
  }  
}

ListView Command code OnExecute function:23082-code.txt
Test result:

Oleksandr Ulianytskyi 1 Reputation point

2020-09-23T12:20:25.247+00:00

I've created a demo repo with clear steps to repoduce: react-command-panel

Share via

SPFX List View Command Set React Error Invariant 290

1 answer

Your answer