I'm trying to do something I've done before. I want to create a new SPFX ListViewCommandSet button which opens a dialog box. However, the moment I reference my custom dialog, the entire extension fails to load with the following error showing up in the console:
listview-host-assembly_en-us_22624d1282d23d4584d53bb10af184fb.js:68 Could not load hello-world-command-set in require. Trying in system.js. TypeError: Cannot read properties of undefined (reading 'id')
at listview-host-assembly_en-us_22624d1282d23d4584d53bb10af184fb.js:68:360145
at new Promise (<anonymous>)
at e.loadComponent (listview-host-assembly_en-us_22624d1282d23d4584d53bb10af184fb.js:68:360113)
at listview-host-assembly_en-us_22624d1282d23d4584d53bb10af184fb.js:68:361874
at async Promise.all (/sites/TS20001/Shared%20Documents/Forms/index 1)
I'm using node v16.19.0. I've tried following this tutorial in a brand new solution.
However when I run gulp serve --nobrowser and go to https://mytenant.sharepoint.com/sites/mysite/mylist/Forms/AllItems.aspx?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js I get the above error and the custom button does not appear.
I've tried using the tutorial's suggested package office-ui-fabric-react and also @fluentui/react as suggested here.
Edit: On further experimentation, it seems the moment I do anything with 'ReactDOM', the extension becomes unloadable. E.g. if I comment out the ReactDOM.render(<ColorPickerDialogContent ... />) call, the extension loads. If I leave it in, or even if I put something like alert(ReactDOM), the extension refuses to load with the error TypeError: Cannot read properties of undefined (reading 'id').
