2

I installed these packages: @pnp/logging @pnp/common @pnp/odata @pnp/sp

npm i @pnp/logging @pnp/common @pnp/odata @pnp/sp --save  

and tried this:

import { sp } from '@pnp/sp';

public componentDidMount() {
  sp.web.lists.getById(this.props.pageContext.list.id.toString())
    .items.getById(this.props.pageContext.listItem.id)
      .select("Department,FreeText")
        .get()
          .then(d => {
            console.log(d);

            this.setState({
              department: d.Department,
              freeText: d.FreeText
            });
          });
}

But got the error:

Property 'web' does not exist on type 'SPRest'.ts(2339)

When I tried also to import Web from @pnp/sp I got this error:

node_modules/@pnp/sp"' has no exported member 'Web'.

What is the problem?

EDIT:

My main webpart typescript:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';


import * as strings from 'TryWebPartStrings';
import Try from './components/Try';
import { ITryProps } from './components/ITryProps';

import { sp } from '@pnp/sp';

export interface ITryWebPartProps {
  description: string;

}

export default class TryWebPart extends BaseClientSideWebPart<ITryWebPartProps> {


  public onInit(): Promise<void> {
    return super.onInit().then(_ => {
      sp.setup({
        spfxContext: this.context
      });
    });
  }

  public render(): void {
    const element: React.ReactElement<ITryProps > = React.createElement(
      Try,
      {
        description: this.properties.description,
        pageContext: this.context.pageContext
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }

}

Version of @pnp/sp is: @pnp/sp@2.0.0

  • Which version of pnpjs you are using? – Ganesh Sanap Dec 25 '19 at 11:58
  • Version of @pnp/sp is: @pnp/sp@2.0.0 – bAbdenour Dec 25 '19 at 12:22
6

In the previous versions 'web' was still present in the rest.d.ts file of the @pnp/sp package. That's not the case anymore. In your main webpart TypeScript file, you have to use the import as follow:

import { sp } from "@pnp/sp/presets/all";
| improve this answer | |
1

In IReactSpfxProps.ts file:

import { WebPartContext } from "@microsoft/sp-webpart-base";

    export interface IReactSpfxProps {
      description: string;
      context: WebPartContext;
    }

WebPart.ts:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';

import * as strings from 'ReactSpfxWebPartStrings';
import ReactSpfx from './components/ReactSpfx';
import { IReactSpfxProps} from './components/IReactSpfxProps';
import pnp from "sp-pnp-js";


export default class ReactSpfxWebPart extends BaseClientSideWebPart<IReactSpfxProps> {

  public render(): void {
    const element: React.ReactElement<IReactSpfxProps> = React.createElement(
      ReactSpfx,
      {
        description: this.properties.description,
        context: this.context
      }
    );

    ReactDom.render(element, this.domElement);
  }

  public onInit(): Promise<void> {

    return super.onInit().then(_ => {

      pnp.setup({
        spfxContext: this.context
      });

    });
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

tsx:

 public componentDidMount() {
    console.log(this.props.context.pageContext.list.id.toString());
    console.log(this.props.context.pageContext.listItem.id.toString());
    pnp.sp.web.lists.getById(this.props.context.pageContext.list.id.toString())
    .items.getById(this.props.context.pageContext.listItem.id)
      .select("Department,FreeText")
        .get()
          .then(d => {
            console.log(d);
          });

 }

enter image description here

| improve this answer | |
0

You need to setup the PnP JS context in your main webpart typescript file like below:

sp.setup({
    spfxContext: this.context
});

Try following the steps given at:

SPFX Load SharePoint list items in a dropdown using PNP SP JS.

| improve this answer | |
  • I edited the question so you can consult the content of main webpart typescript – bAbdenour Dec 25 '19 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.