Injecting CSS on SharePoint Modern pages in SharePoint Server 2019 environment

Question

We are using SharePoint Modern communication site on SharePoint Server 2019. I am tasked with customizing the out-of-the-box template for header and adding a footer. I was toying with using https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-injectcss but I am unable to get it to work.

The SPPKG file throws the following error when I deploy it to SharePoint Server 2019 apps. How do I modify the look and feel of Communication Site header in SharePoint 2019. Any help would be appreciated.

There were errors when validating the App manifest.:Xml Validation Exception: 'The 'IsDomainIsolated' attribute is not declared.' on line '1', position '322'.

Answer 1

The web part in the link you provided is using SPFx v1.8.0 which is supported in SharePoint online only.

While SharePoint 2019 supports SPFx version up to v1.4.1 only.

Source: SharePoint Framework development with SharePoint Server 2019 & SharePoint Server SE

So, you have to re-create the above web part using SPFx v1.4.1 to use it in SP 2019 environment.

---

Also, an error you are getting is related to isDomainIsolated property in config/package-solution.json file. This property is used to create "Isolated web parts" in SharePoint online which is supported only SPFx v1.8 and later.

Source: Isolated web parts

So, while creating SPFx web part for SharePoint 2019, remove isDomainIsolated property from config/package-solution.json file.