Explicit package exports in the latest version of Fluent UI might break your PCF path imports

If you are using Fluent UI in your code components (PCF) you probably are also using path-based imports to reduce your bundle size. This technique ensures that when you build your code component, the bundle doesn't include the entire Fluent UI library, but instead just the components that you need. With the recent update to Fluent UI, you might receive an error similar to the following:

ERROR in ./somefile.tsx 
Module not found: Error: Package path ./lib/components/CommandBar is not exported from package C:\src\CommandBar\node_modules\@fluentui\react (see exports field in C:\demo4\CommandBar2\node_modules\@fluentui\react\package.json)

This is probably caused by your paths pointing to a folder that is not included in the new explicit export paths that have been added to the Fluent UI react package. 

To ensure that you maintain compatibility with each update to the Fluent UI library, instead of using:

import { CommandBar } from '@fluentui/react/lib/components/CommandBar';

You should instead use:

import { CommandBar } from '@fluentui/react/lib/CommandBar';

See more information in the docs: Best practices for code components - Power Apps | Microsoft Docs

That's all for now!

@ScottDurow