Fixing React Component Errors in SPFx Application Customizer: The Modern Way! 🚀

If you’ve ever worked on creating an Application Customizer with a React component in SharePoint Framework (SPFx), chances are you’ve encountered an error like the one in the console below:

The Culprit Behind the Error 🕵️‍♂️

The error typically occurs when the React dependencies—namely react and react-dom—haven’t been installed in your SPFx project. If you’re new to this, you might spend hours scratching your head wondering why the component isn’t loading as expected.

Here’s the thing: React isn’t included automatically in every SPFx project, especially when dealing with plain typescript scaffolds. Without these libraries, the browser simply doesn’t know how to render your React-based customizer, resulting in the dreaded console errors. 😰

The Traditional Fix 🔧

The classic solution involves manually installing these dependencies. You’d run the following command:

npm install react@17.0.1 react-dom@17.0.1

Why 17.0.1?

This version is specifically compatible with SPFx versions 1.15.2 and above. Installing a different version of React could lead to compatibility issues, so always double-check your SPFx version(https://learn.microsoft.com/en-us/sharepoint/dev/spfx/compatibility#spfx-development-environment-compatibility) before proceeding.

While this method works perfectly fine, there’s now a better way to handle this dependency issue without manual intervention. 🎉

The Modern Fix: SharePoint Framework Toolkit ⚙️

The latest pre-release version (4.3.3) of SharePoint Framework Toolkit introduces a modern approach that eliminates the hassle of manually managing dependencies for application customizer scaffolding. During the scaffolding process, the pre-release version provides an additional step to automatically install required React dependencies. 👌

Why Go Modern? 🌟

Here’s why adopting the SPFx Toolkit’s modern approach is a no-brainer:

1. Saves Time: Dependency management becomes an automatic process.

2. Prevents Errors: No more mismatched React versions or forgotten installations.

3. Boosts Productivity: Focus on writing code instead of troubleshooting dependency issues.

Bonus Tips 💡

• Always check the SPFx version before installing dependencies. The compatibility matrix is key to avoiding errors.

• Consider upgrading to the latest SPFx version to leverage all modern tooling benefits.