Pnpjs: 404 _vti_bin/client.svc/ProcessQuery? when using @pnp/sp-taxonomy on modern page

[mhintner]

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the Docs to see if your question is already addressed there. This will help us ensure our documentation covers the most frequent questions.

Category

• [ ] Enhancement
• [x ] Bug
• [ ] Question
• [ ] Documentation gap/issue

Version

Please specify what version of the library you are using: [ ]
1.1.5.4
If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Expected / Desired Behavior / Question

If you are reporting an issue please describe the expected behavior. If you are suggesting an enhancement please
describe thoroughly the enhancement, how it can be achieved, and expected benefit. If you are asking a question, ask away!
let stores = await taxonomy.termStores.get();
should return available taxonomy stores

Observed Behavior

If you are reporting an issue please describe the behavior you expected to occur when performing the action. If you are making a
suggestion or asking a question delete this section.
When using SPFx WebPart on modern page:
Uncaught error in promise
404 /sitepages/_vti_bin/client.svc/ProcessQuery?

Steps to Reproduce

If you are reporting an issue please describe the steps to reproduce the bug in sufficient detail to allow testing. If you are making
a suggestion or asking a question delete this section.
sp-taxonomy works on classic pages, error on every modern page,
Render contains:
pnp.setup({
spfxContext: this.context
});

Submission Guidelines

Thank you for your feedback!

[patrick-rodgers]

Are you sure the call to setup happens before the call to get the data? We have seen that many times. Thanks for reporting, will have a look.

[mhintner]

I'm calling getallTerms() from the Render Method

public async getallTerms() {
pnp.setup({
spfxContext: this.context
});
let stores = await taxonomy.termStores.get();
let store = stores[0];
let katterms = await store.getTermSetById("371148be-1def-4776-8821-7bf9c35775ba").terms.get();

[simonagren]

@mhintner weird. The 404 says that if cannot be found.
I don't know why it tries to use "/sitespages/_vti_bin/client.svc/ProcessQuery?"

Because the it should be https://tenant.sharepoint.com/sites/sitename/_vti_bin/client.svc/ProcessQuery?
Could you have a look in Fiddler?

[koltyakov]

Hi @mhintner,

It's probably the wrong object which is configured with SPFx context, e.g. sp from @pnp/sp but not a taxonomy from @pnp/sp-taxonomy. As a result, taxonomy uses wrong base url. Please check/try this out:

import { taxonomy } from '@pnp/sp-taxonomy';
taxonomy.setup({
  spfxContext: this.context
});

[patrick-rodgers]

The setup method on taxonomy is an alias to the sp one, so shouldn't matter which one is called. If it does that might be a bug. Just out of curiosity the import "pnp" where does that come from, i.e. can you share the import statement you are using?

[simonagren]

@patrick-rodgers @mhintner @koltyakov
Would this make a difference?

In your webpart ".ts" file import the setup
import { setup } from "@pnp/common";

Then in your "export default class... " in the onInit

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

Then do code in the render method!

[mhintner]

@koltyakov - thank you, that did the trick! I'm now executing both, because when setting up taxonomy only, other promise-errors occurred.

@patrick-rodgers @simonagren thanks for your help
import pnp, { SearchQuery, SearchQueryBuilder, SearchResults, SearchSuggestQuery, SearchSuggestResult } from "sp-pnp-js";
import {
taxonomy,
ITermStore,
ITerms,
ILabelMatchInfo,
ITerm,
ITermData
} from "@pnp/sp-taxonomy";
...
pnp.setup({
spfxContext: this.context
});

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

[koltyakov]

@mhintner,

sp-pnp-js is an old library it might conflict with the new one, which part of sp-taxonomy is.
I'd suggest not mixing old and new one and use @pnp/sp instead of sp-pnp-js. To simplify a transition @pnp/pnpjs can be used which is the rollup mimicking old all in one lib structure.

@patrick-rodgers,

The setup method on taxonomy is an alias to the sp one, so shouldn't matter which one is called.

Oh, I completely missed out they are aliases, thanks for correcting me on this.

[simonagren]

So that was probably it then, @mhintner used the sp-pnp-js for setup.

Since taxonomy.setup is an alias, the "normal" import should work as well as the one @koltyakov wrote.

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

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

[koltyakov]

Going to close this as answered.

[pkmelee337]

Hi Guys,

I currently have the exact same problem with setting up sp from the pnp/pnpjs library and taxonomy from the pnp/sp-taxonomy library. After configuring both this issue is solved. sp-taxonomy isn't include in the pnp/pnpjs library, so I guess that's causing the problem.

[svermaak]

pkmelee337, please elaborate on what you did to solve this. I have the same issue using sp from the pnp/pnpjs library and taxonomy from the pnp/sp-taxonomy library

Do you mean this?

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

      // other init code may be present

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

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

Why isn't there a v2 sp-taxonomy library. Mixing it doesn't work on all tenants, using all as v1.3.11 doesn't work on all tenant. I am so sick of this SitePages error

[pkmelee337]

@svermaak yes this is exactly what I meant. What I've also seen causing this error is wrong imports of 'sp'. When you configure sp from the @pnp/pnpjs you will have to import sp from @pnp/pnpjs in all your files and vise versa with @pnp/sp.