FileTypeIcon Errors Out and Crashes Page

[evan-buss]

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 documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.

Category

• Enhancement
• Bug
• Question

Version

Please specify what version of the library you are using: v3.18.1

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

After upgrading to v3.18.1 I'm getting this error when trying to use the FileTypeIcon component.

TypeError: Cannot add property onClick, object is not extensible
    at FileTypeIcon.render 

Observed Behavior

I expected it to render the file icons based on the given path, but it crashes the page.

Steps to Reproduce

Using SPFX 1.19.0, import and use the FileTypIcon component:

  <FileTypeIcon type={IconType.image} path={file.Filename} />

This seems to be related to the additional props that were added to this component in v3.18.0? Pull Request

Thanks!

[github-actions]

Thank you for submitting your first issue to this project.

[evan-buss]

I rolled back to SPFX 1.18.2 and it also has the same error and crashes the page.

[michaelmaillot]

Hi @evan-buss,

Thanks for raising this. Did you try with latest version (3.20.0)? I tried to repro without success.

[michaelmaillot]

Closing this, feel free to reopen it if needed.

[jhholm]

I am able to reproduce this. Unfortunately I haven't found the exact reason why this happens, other than getting the same error message.

What makes this interesting, is that I cannot reproduce this if I'm running gulp serve, but I'm getting the issue when using spfx-fast-serve in spfx 1.20.0 and 1.21.0 projects.

So far I can use the latest version with patch-package and removing the additions mentioned in the PR. If I have time, I can check if I can create a PR.