search

pnp / sp-dev-fx-controls-react

Reusable React controls for SPFx solutions
https://pnp.github.io/sp-dev-fx-controls-react/
MIT License
384 stars 379 forks source link

SPFX Controls in external library #1864

Open gjatbizp opened 2 months ago

gjatbizp commented 2 months ago

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')

Untitled

Category - Question Version - 3.18.1

Thanks!

github-actions[bot] commented 2 months ago

Thank you for submitting your first issue to this project.

michaelmaillot commented 2 months ago

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:

Detailed info is described in @joelfmrodrigues's article.

gjatbizp commented 2 months ago

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 commented 1 month ago

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 commented 1 month ago

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.