There are many question whether it is possible to create a modern SPFx web part as a control in Page Layout (Template).
Yes, there is a workaround which is far from ideal but works:
· Export your SPFx webpart from the browser (.webpart file).
· Upload the .webpart file to the webpart gallery.
· Open SharePoint designer
· Navigate to page layouts folder from your SharePoint designer
· Right click on your page layouts
· Open the page layouts (ie: .aspx) as preview in browser
· Manually edit the aspx file in browser by clicking on edit button or by navigating using the URL “?ToolPaneView=2&pagemode=edit”
· Add the required SPFx webpart from the “Add Webpart” section.
· Save the aspx and when you create a page using the page layout, your SPFx webpart should be there.
Note: Please ignore the error while saving the .aspx page from browser. Just refresh your page then webpart will get added automatically.
Here you go!
Your page layout is ready with SPFx webpart.