Bug with gulp serve + react-three-fiber

[PooLP]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

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

Additional environment details

• browser version : Chrome 96
• SPFx version : 1.13.1
• Node.js version : 14.16
• Windows version : 11

Describe the bug / error

Hi,

I wanted to make my first example webpart for using threeJS / React-three-fiber (https://github.com/pmndrs/react-three-fiber).

I configured the webpart and started coding, but gulp serve do not work correctly, after launching debug mode on the browser, the browser blocks (infinite loop?).

Not finding the error, so I built the package to test a deployed version and it works.

I would need help because I don't see where the problem is.

If anyone could test on another environment (mac / linux) or if you have any idea, I am interested.

I have tested with and without fast-serve, i have the same result.
I have tested on another browser, i have the same result.

Packaged version for test
spfx-react-threejs-sample.zip

gitHub repos
https://github.com/PooLP/spfx-react-threejs-sample

Steps to reproduce

1. launch gulp serve
2. launch sharepoint for debug webpart
3. add the webpart

if webpart block on add step, add the package on your app catalog, and add webpart in normal use (no debug) and launch debug after

Expected behavior

it's my first exemple for PnP, i would like to finish it ^^

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

[patmill]

It would be good to provide more information. Where is the infinite loop, what's the callstack, anything show up in the console, anything in the network trace, what have you done to debug and diagnose so far, etc.

[PooLP]

Where is the infinite loop => on first load, in debug mode (only sharepoint interface appear, browser block after)
what's the callstack => i can't verify, browser block
anything show up in the console => nothing, browser block
anything in the network trace => nothing, browser block

I have no solution for debugging, gulp serve blocks browser.

the only test that worked, is the packaged version work correctly, i have the problem only in debug mode.

is there a solution to put a debug mode on webpack / gulp task or trace before the first loading? fiddler, but what should i watch?

If i'm remove react-three-fiber elements, all work in debug, but is not a solution.

i'm use this lib on other projects without problem, but is not spfx projects.

[PooLP]

@patmill Unfortunately, I do not have more information to provide, the browser freeze before being able to do anything.

Could you test on your side? it may be my environment, even if I have no problem with all my other SPFx projects.

[patmill]

So in general, we don't investigate why random package isn't working. If you can point out why it's not working, we can look at fixing it. That said, I took a look at your sample github project, and I'm puzzled by this line in your package.json file:

"react-three-fiber": "5.x.x"

That doesn't look like a valid reference.

[PooLP]

for "react-three-fiber": "5.x.x" this is another way to get the latest fixes for a specific version (5.x.x => ~5.0.0)
https://docs.npmjs.com/cli/v8/configuring-npm/package-json#dependencies

I think I have trouble making myself understood, my English is not very good.

I don't ask that we debug for me, but that we help me to find a solution to debug.

The problem only occurs in debug mode. All the code works once the package is created.

but in debug mode, the browser freezes before there is the slightest error or possibility of debugging on the browser side.

So I'm asking for help with:

• Check if other users on an environment other than Windows 11 encounter the problem to eliminate a platform problem
• Ideas so that I can trace the problem, because I don't know how I can debug a problem related to the debug mode of the SPFx

PS : react-three-fiber is not a little ramdom package (https://github.com/pmndrs/react-three-fiber) 2.6M of download.
I'm use version 5.x.x because it is compatible with typescript 3, newer versions must be compatible with Typescript 4, but SPFx is not compatible whitout modification, it could have side effects for debugging. I will modify this when the debug problems are fixed.