Form Customizer doesn't work in development mode if using SPComponentLoader #10352
Description
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
"dependencies": {
"@fluentui/react": "8.122.11",
"@microsoft/decorators": "1.20.0",
"@microsoft/sp-adaptive-card-extension-base": "1.20.0",
"@microsoft/sp-core-library": "1.20.0",
"@microsoft/sp-listview-extensibility": "1.20.0",
"@microsoft/sp-lodash-subset": "1.20.0",
"@microsoft/sp-office-ui-fabric-core": "1.20.0",
"@microsoft/sp-property-pane": "1.20.0",
"@microsoft/sp-webpart-base": "1.20.0",
"@pnp/sp": "2.0.5",
"@pnp/spfx-property-controls": "3.19.0",
"gulp-zip": "5.1.0",
"office-ui-fabric-react": "7.204.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"tslib": "2.8.1"
}
Describe the bug / error
Could not load form-customizer in require. Error: Script error for "@microsoft/sp-loader", needed by: eb5b767e-543b-453d-9d32-ef15f53ae1da_1.1.0.4
https://requirejs.org/docs/errors.html#scripterror
at makeError (eval at e (sp-list-form-application-assembly_en-us_65c077022f3cac7b1722da811f98fc5d.js:211:11669), <anonymous>:5:1843)
at HTMLScriptElement.onScriptError (eval at e (sp-list-form-application-assembly_en-us_65c077022f3cac7b1722da811f98fc5d.js:211:11669), <anonymous>:5:17037)
Steps to reproduce
Create SPFx package with form customizer in it
Use SPComponentLoader in your code:
import { SPComponentLoader } from '@microsoft/sp-loader';
...
SPComponentLoader.loadScript(...)
Run gulp serve
Apply customizer to some list
When opening a form blank screen appears with console error
Could not load form-customizer in require. Error: Script error for "@microsoft/sp-loader"
Form customizer works OK if package is built in release mode and code isn't hosted from localhost.
Expected behavior
Form customizer is rendered normally