In one of my projects, I needed to implement “lookup”-alike control that will be used as a filter for the data shown in the datagrid below. I forced myself to move away from comfy FluentUI 8 and decided to use FluentUI 9 because its usage is coming and I would highly encourage you, my dear reader, to start learning and use it early.

I decided to use TagPicker component to create that lookup control because it looked like the best candidate that would require minimal tweaking and styling. Everything went smoothly pretty much until the moment I ran the PCF I created for the first time.

Problem

During the first run, I got the following notorious and well-known-among-PCF-developers result – “Error loading control” error instead of rendered control. The explanation provided didn’t shed any light on what was the reason:

The downloaded Log file didn’t provide any explanation either.

I started to troubleshoot the code line-by-line and the code was blowing up exactly on the line where TagPicker component was initialized:

The next check I did was check of “FluentUI” webpack-ed module:

So… TagPicker was not there. Now I had to understand why. And the answer was quite simple – 9.46.2 is the version of the FluentUI components that are used in a run-time and TagPicker was introduced with one of later versions – and that’s exactly it was not available.

Solution

Since I realized the cause of the issue, I started thinking about the resolution.

One of the ways was to stop using Virtual PCFs and roll back to old-style “standard” components. But I’m lazy, as many developers and moving away from Virtual to Standard PCF controls would require refactoring so I decided to comment out the “FluentUI” library in the manifest file:

During the next build instead of relying on the platform’s version of Fluent, the bundler will introduce the version of Fluent that was used in the project, so the version that contained TagPicker component, “own” version if you will. Once that was done – PCF ran smoothly and rendered the way I wanted.