js-workbench-customizer - Workbench Customizer Hangs The browser

[Ofer-Gal]

Disclaimer

Yes

Sample

js-workbench-customizer

Contributor(s)

@joelfmrodrigues

What happened?

When I add the js-workbench-customizer web part. The browser hangs. (Any last version browser)
It used to work fine for 3 years now. Only a problem the last few weeks
I created a new 1.18.2 SPFx Webpart and copy the source but this version does exactly the same.

Steps to reproduce

1. run gulp serve
2. start workbench
3. add workbench-customizer
4. now it is stuck and the browser hangs

Expected behavior

Allow me to use wider windows

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

• Internet Explorer
• Microsoft Edge
• Google Chrome
• FireFox
• Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

What version of Node.js is currently installed on your workstation?

16.19.0

What version of Node.js is required by the sample?

N/A

Paste the results of SPFx doctor

√ SharePoint Framework v1.18.2
√ Node v16.19.0
√ yo v5.0.0
√ gulp-cli v2.3.0
× typescript v4.7.4 installed in the project

Recommended fixes:

• npm un typescript

Additional environment details

Is there another tool to make workbench wider?
Thanks

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[joelfmrodrigues]

Hey @Ofer-Gal , thanks for reporting this, will try to have a look this week.

[joelfmrodrigues]

@Ofer-Gal I'm not sure what is going on here...it looks like even if I comment all the custom code from the solution the web part still has the same issue, so I am inclined to think that the issue is with some internal dependency...
I will create a new solution and copy the code to see if this resolves the issue, and if so, submit a PR.

[Ofer-Gal]

At least I am not dreaming :-)
Thank you for the effort.

[joelfmrodrigues]

At least I am not dreaming :-) Thank you for the effort.

Definitely not dreaming, I get the same result 😁

[Ofer-Gal]

I get by without it by using:

:global {
  #workbenchPageContent,
  .CanvasComponent.LCS .CanvasZone {
    max-width: 100% !important;
  }
}

in the {webpartname}.module.scss file
No hurry 😁😎

[joelfmrodrigues]

@Ofer-Gal PR created 🙂