Unable to reference pnp js from CDN

[harshdamaniahd]

Hi ,
I tried referring pnp js from cdn in this way , in the config.json file
"externals": { "@pnp/logging": "https://cdnjs.cloudflare.com/ajax/libs/pnp-logging/1.1.1/logging.es5.umd.min.js", "@pnp/common": "https://cdnjs.cloudflare.com/ajax/libs/pnp-common/1.1.1/common.es5.umd.min.js", "@pnp/odata": "https://cdnjs.cloudflare.com/ajax/libs/pnp-odata/1.1.1/odata.es5.umd.min.js", "@pnp/sp": "https://cdnjs.cloudflare.com/ajax/libs/pnp-sp/1.1.1/sp.es5.umd.min.js" }

In SPFX, I am trying to import it like this :
import * as pnp from '@pnp/sp'; import * as common from '@pnp/common';

let a=common.getRandomString(10); console.log(a); let b = common.getGUID(); console.log(b); pnp.sp.web.lists.getByTitle("Documents").items.getAll().then((res)=>{ debugger; console.log(res) })

the solution get build , but when i go to browser and load the webpart it gives error
[SPLoaderError.loadComponentError]:
***Failed to load component "19e746db-f785-42c2-8916-8832a69cf11f" (PnpTestingWebPart).
Original error: ***Failed to load path dependency "@pnp/common" from component "19e746db-f785-42c2-8916-8832a69cf11f" (PnpTestingWebPart).
Original error: Error loading https://relative-path.invalid/@pnp/logging as "@pnp/logging" from https://component-id.invalid/19e746db-f785-42c2-8916-8832a69cf11f_0.0.1/@pnp/sp
Error loading https://relative-path.invalid/@pnp/logging as "@pnp/logging" from https://component-id.invalid/19e746db-f785-42c2-8916-8832a69cf11f_0.0.1/@pnp/common
Unable to load script https://relative-path.invalid/@pnp/logging

***INNERERROR:
***Failed to load path dependency "@pnp/common" from component "19e746db-f785-42c2-8916-8832a69cf11f" (PnpTestingWebPart).
Original error: Error loading https://relative-path.invalid/@pnp/logging as "@pnp/logging" from https://component-id.invalid/19e746db-f785-42c2-8916-8832a69cf11f_0.0.1/@pnp/sp
Error loading https://relative-path.invalid/@pnp/logging as "@pnp/logging" from https://component-id.invalid/19e746db-f785-42c2-8916-8832a69cf11f_0.0.1/@pnp/common
Unable to load script https://relative-path.invalid/@pnp/logging
***CALLSTACK:
Error
at t [as constructor] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-06-22.004/sp-webpart-workbench-assembly_en_5eebbe414f9f1604c694d685eaf30b64.js:283:16003)
at new t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-06-22.004/sp-webpart-workbench-assembly_en_5eebbe414f9f1604c694d685eaf30b64.js:928:22633)
at Function.e.buildErrorWithVerboseLog (https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-06-22.004/sp-webpart-workbench-assembly_en_5eebbe414f9f1604c694d685eaf30b64.js:928:14508)
at Function.e.buildLoadComponentError (https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-06-22.004/sp-webpart-workbench-assembly_en_5eebbe414f9f1604c694d685eaf30b64.js:928:10707)
at https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-06-22.004/sp-webpart-workbench-assembly_en_5eebbe414f9f1604c694d685eaf30b64.js:928:65800

Where am i going wrong ?

[patrick-rodgers]

Hi @harshdamaniahd - I think you need to update how you are importing things:

import { sp } from '@pnp/sp';
import { <The thing you are trying to use here> } from '@pnp/common';

You can see any of the docs pages for more examples, such as here or here.

Give that a shot and let us know if that helps.

[harshdamaniahd]

This is what i did
"externals": { "@pnp/logging": "https://cdnjs.cloudflare.com/ajax/libs/pnp-logging/1.1.2-2/logging.es5.umd.min.js", "@pnp/common": "https://cdnjs.cloudflare.com/ajax/libs/pnp-common/1.1.2-2/common.es5.umd.min.js", "@pnp/odata": "https://cdnjs.cloudflare.com/ajax/libs/pnp-odata/1.1.2-2/odata.es5.umd.min.js", "@pnp/sp": "https://cdnjs.cloudflare.com/ajax/libs/pnp-sp/1.1.2-2/sp.es5.umd.min.js" },

but at the end i get this error , it is not working

[patrick-rodgers]

This doesn't appear to be an issue with this library. The CDNjs links work and the externals appear to be configured correctly based on the documentation. You can see in the error message that SPFx is trying to load the dependency from "https://relative-path.invalid" which obviously isn't going to work. You can post this to the sp-dev-docs issue list and see if they can help out. I'll leave this open for now in case there is something we can do on our side.

[patrick-rodgers]

This was updated in the linked issue, we will update our docs based on that feedback as it is a feature I was not aware of.

[patrick-rodgers]

Linking this into conversation: AzureAD/azure-activedirectory-library-for-js#443

[patrick-rodgers]

Please see the updated article on deployment. You will need to update to today's beta 1.1.5-3 for things to work if you want to use individual packages.

Going to close this as it is addressed in the upcoming release. Thanks!

[github-actions]

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.