Getting TypeError: _sp.hubSites is not a function error with @pnp/sp/hubsites

[cardinalpipkin]

What version of PnPjs library you are using

3.x

Minor Version Number

3.18.0

Target environment

SharePoint Framework

Additional environment details

SharePoint Online. Simple webpart that should list all hubsites from root tenant URL. Using pnpjs-config.ts. "name": "hub-site-map", "version": "0.0.1", "private": true, "engines": { "node": ">=16.13.0 <17.0.0" }, "main": "lib/index.js", "scripts": { "build": "gulp bundle", "clean": "gulp clean", "test": "gulp test" }, "dependencies": { "@fluentui/react": "^7.199.1", "@microsoft/sp-component-base": "1.17.4", "@microsoft/sp-core-library": "1.17.4", "@microsoft/sp-lodash-subset": "1.17.4", "@microsoft/sp-office-ui-fabric-core": "1.17.4", "@microsoft/sp-property-pane": "1.17.4", "@microsoft/sp-webpart-base": "1.17.4", "@pnp/logging": "^3.18.0", "@pnp/sp": "^3.18.0", "office-ui-fabric-react": "^7.199.1", "react": "17.0.1", "react-dom": "17.0.1", "tslib": "2.3.1" }, "devDependencies": { "@microsoft/eslint-config-spfx": "1.17.4", "@microsoft/eslint-plugin-spfx": "1.17.4", "@microsoft/rush-stack-compiler-4.5": "0.5.0", "@microsoft/sp-build-web": "1.17.4", "@microsoft/sp-module-interfaces": "1.17.4", "@rushstack/eslint-config": "2.5.1", "@types/react": "17.0.45", "@types/react-dom": "17.0.17", "@types/webpack-env": "~1.15.2", "ajv": "^6.12.5", "eslint": "8.7.0", "eslint-plugin-react-hooks": "4.3.0", "gulp": "4.0.2", "typescript": "4.5.5" }

Question/Request

When logging the results of:

import {getSP} from '../pnpjs-config';
import { IHubSiteInfo } from  "@pnp/sp/hubsites";

import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import "@pnp/sp/comments"
import "@pnp/sp/site-users/web";
import "@pnp/sp/attachments";
import "@pnp/sp/folders";
import "@pnp/sp/files";

export const GetHubSites = async () => {
    const _sp = getSP();
    const hubsites: IHubSiteInfo[] = await _sp.hubSites();
    console.log(hubsites, 'hubsites');

}

It compiles but then errors in workbench saying: Getting TypeError: _sp.hubSites is not a function Can anyone explain what I'm doing wrong please?

[juliemturner]

In this line you're only importing the interface from @pnp/sp/hubsites. import { IHubSiteInfo } from "@pnp/sp/hubsites"; You need an additional line: import "@pnp/sp/hubsites";

[cardinalpipkin]

Yes that worked. Thanks Julie.

[github-actions[bot]]

This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.