SPFX Controls in external library

[gjatbizp]

I am using "@pnp/spfx-controls-react": "3.18.1" in one of my SPFX Library project. I deployed this library dist files at our CDN.
And I want to consume this library into my webpart project. But when I added a component from library into my webpart tsx file. It is not working and giving following error.

TypeError: Cannot read properties of undefined (reading 'EnvironmentType')

Category - Question
Version - 3.18.1

Thanks!

[github-actions]

Thank you for submitting your first issue to this project.

[michaelmaillot]

Hello @gjatbizp,

May I ask: does the SPFx component library consumption issue occur if you're not including the SPFx Controls package?

Things to consider when installing the SPFx Controls in a component library:

• Some SPFx packages are required to be installed first such as sp-http
• config.json file must be updated with localization reference to the SPFx Controls

Detailed info is described in @joelfmrodrigues's article.

[gjatbizp]

Hello @gjatbizp,

May I ask: does the SPFx component library consumption issue occur if you're not including the SPFx Controls package?

Things to consider when installing the SPFx Controls in a component library:

• Some SPFx packages are required to be installed first such as sp-http
• config.json file must be updated with localization reference to the SPFx Controls

Detailed info is described in @joelfmrodrigues's article.

Hi @michaelmaillot,

Yes, when I comment out the SPFx Controls package related code, then it works.

I’m trying to deploy my library project (/dist) as a CDN-hosted JS file, but I’m encountering these issues when referencing this CDN in my web part project. However, if I deploy my library as an SPPKG to the SharePoint App Store, everything works fine.

[michaelmaillot]

Ok I understand what you mean by "external library" (I thought you were refering to SPFx library component).

I'm not sure that this project is supposed to work as a CDN-hosted JS file, since it's using SPFx core components in its base.

For example, the error you're referring to is coming from the telemetry function which has a reference to the @microsoft/sp-core-library Environment class .

@AJIXuMuK can you confirm or invalidate my statement?

[AJIXuMuK]

SPFx library should be packaged and deployed to your tenant.
After that you can reference it in any other SPFx solution.
If you just deploy dist to a CDN we won't know/understand how to correctly load all the dependencies, which for sure can lead to errors.