I am developing a multiscreen webpart, I am using react framework. I am not able to get the context to load in the webpart file(.tsx) Below is the code so far. There were 2 issues initially, one was getting the page url without /sitepages when the webpart is deployed, I worked around this by passing my own web url manually as I was not able to get the url from the page context when the .ts file or oninit(it will load first so saving the context to be used in other .tsx files) Now I am trying to implement people picker control spfx where I need the content for that tag.


export default class ReactGetItemsWebPart extends 
BaseClientSideWebPart<IReactGetItemsProps> {
public onInit(): Promise < void> {
return super.onInit().then(_ => {
    spfxContext: this.context

public render(): void {
const element: React.ReactElement<IReactGetItemsProps > = React.createElement(
    description: this.properties.description,
    spfxContext: this.context,
    siteUrl: this.context.pageContext.web.absoluteUrl
console.log("render in .ts rrann");
ReactDom.render(element, this.domElement);




const item: any = await 
import { WebPartContext } from "@microsoft/sp-webpart-base";


export interface IReactGetItemsProps {
description: string;
 fieldRenderer?: JSX.Element;
 siteUrl:string; }

I am receiving the following errors: Uncaught (in promise) TypeError: Cannot read property 'spfxContext' of undefined

Below are the links I have referred to and tried
1. Github PnPJS latest 2.0 version
2. C# corner post- please refer to the comments section for my comments
3. GitHub - Link to the comment - -There is a comment here which basically resolves the issue, I have tried it but no luck

Please Help!!

  • can you show us the definition of your IReactGetItemsProps interface?
    – willman
    Feb 10, 2020 at 22:29
  • export interface IReactGetItemsProps { description: string; spfxContext:WebPartContext; fieldRenderer?: JSX.Element; siteUrl:string; }
    – ssspfx
    Feb 11, 2020 at 13:18

1 Answer 1


Sample demo(hope this helps):

component interface definition:

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

export interface IReactSpFxProps {
  description: string,
  context: WebPartContext,


export default class ReactSpFx extends React.Component<IReactSpFxProps, IReactGetItemsState> {
public componentDidMount() {
var reactHandler = this;
      SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
        response.json().then((responseJSON: any) => {
            items: responseJSON.value.sort()
  • Thanks @Lee_MSFT I will try this out. I am currently getting data in componentWillMount(). I have just read that it was deprecated.I will let you know shortly once I try it out.
    – ssspfx
    Feb 11, 2020 at 13:35
  • I have tried your way and it was working in my hellowworld test webpart which was not using react router dom. So in hellow world, the render in ts webpart file is loading just fine. After so many hours of troubleshooting, I found out that in the multiscreen proj which I am using, only tsx files are loading not the ts files.....Please suggest. Here is the link to my repository.github.com/schittuluri1/MultiscreenReact
    – ssspfx
    Feb 11, 2020 at 20:08
  • can not find your repository
    – Lee
    Feb 12, 2020 at 7:26
  • @SudheerChittuluri its giving page not found error.. maybe you didn't make your repository public Feb 12, 2020 at 9:33
  • Thanks guys. I was able to figure it out that I was using multiple .ts files which was wrong. I need to have only one .ts file which will load first before all others. Once I had my sp.setup set in that file, everything started working.I will mark Lee_MSFT as anwer since it was on the right path to my solution.
    – ssspfx
    Feb 12, 2020 at 13:24

Your Answer

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

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