0

I'm having problem when adding DateTimePicker from the @pnp/spfx-controls-react collection. Once added in the render() method, I'm seeing <DateTimePicker name underlined and following error:

'DateTimePicker' cannot be used as a JSX component.
  Its instance type 'DateTimePicker' is not a valid JSX element.
    Types of property 'refs' are incompatible.
      Type '{ [key: string]: import("c:/Users/[...]/source/repos/BnpViews/node_modules/@pnp/spfx-controls-react/node_modules/@types/react/index").ReactInstance; }' is not assignable to type '{ [key: string]: React.ReactInstance; }'.
        Index signatures are incompatible.
          Type 'import("c:/Users/[...]/source/repos/BnpViews/node_modules/@pnp/spfx-controls-react/node_modules/@types/react/index").ReactInstance' is not assignable to type 'React.ReactInstance'.
            Type 'Component<any, {}, any>' is not assignable to type 'ReactInstance'.
              Type 'Component<any, {}, any>' is not assignable to type 'Component<any, {}>'.
                The types returned by 'render()' are incompatible between these types.
                  Type 'ReactNode' is not assignable to type 'false | Element'.
                    Type 'string' is not assignable to type 'false | Element'.ts(2786)

My component code:

import * as React from 'react';
import { IBnpViewsPanelProps } from './IBnpViewsPanelProps';

import styles from './BnpViewsPanel.module.scss';
import { DateTimePicker, DateConvention } from '@pnp/spfx-controls-react/lib/dateTimePicker';

export interface IBnpViewsPanelState {
  date: Date|null;
}

export default class BnpViewsPanel extends React.Component<IBnpViewsPanelProps, IBnpViewsPanelState> {
  constructor(props: IBnpViewsPanelProps){
    super(props);

    this.setState({date: null});
  }

  public render(): React.ReactElement<IBnpViewsPanelProps> {
    return(
      <DateTimePicker label="test" dateConvention={DateConvention.Date} value={this.state.date}/>
    );
  }



}

My packages:

  "dependencies": {
    "@microsoft/sp-core-library": "~1.4.0",
    "@microsoft/sp-lodash-subset": "~1.4.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
    "@microsoft/sp-webpart-base": "~1.4.0",
    "@pnp/sp": "^2.0.12",
    "@pnp/spfx-controls-react": "2.2.0",
    "date-fns": "^2.16.1",
    "react": "15.6.2",
    "react-dom": "15.6.2"
  },
  "

Any ideas?

1
  • 1
    Looks like you are using SPFx 1.4 with spfx-controls-react 2.2.0. I believe v2 requires 1.11.0 for SPFx. If you stick with 1.4 you must use V1. pnp.github.io/sp-dev-fx-controls-react brings this up, I'm just not sure if I am reading this right. Commented Dec 8, 2020 at 21:10

1 Answer 1

1

Just as @m1g suggested in the comment, the problem was with SPFx version vs spfx-controls-react version. Once I've downgraded the controls to 1.x everything started to run smoothly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.