Power Platform Community Forum Thread Details

Hi Community,

I’m facing an issue while working with a PCF (PowerApps Component Framework) code component in Power Apps Studio.

I have created a code component (PCF) and added it inside a Canvas App that is part of a solution. However, whenever I try to use the component on a page/screen inside the solution, Power Apps Studio becomes unresponsive and I get the following message:

"Page Unresponsive – You can wait for it to become responsive or exit the page. (Power Apps Studio | App)"

This issue only occurs when the PCF component is used on the screen. If I remove the component, the page works normally.

Environment Details:

Using PCF code component
App created inside a Solution
Issue occurs when adding the component to a screen/page

What I’ve Tried:

Refreshing the browser
Reopening Power Apps Studio
Removing and re-adding the component

But the issue still persists.

Has anyone experienced a similar issue when using PCF components in a solution-based Canvas App? Any suggestions or best practices to resolve this would be greatly appreciated.

Thanks in advance! 🙏

Categories:

Building Power Apps

Connector development

Power Apps Pro Dev & ISV

Error handling

General topics

Hi,

This is a well-known pain point with PCF components inside solution-based Canvas Apps. The "Page Unresponsive" error usually means the browser's main thread is getting blocked. A few specific causes to investigate:

Check the PCF component's init() method first. If it runs a synchronous loop, a heavy DOM operation, or calls an external resource without a timeout, it will freeze the Studio renderer. Solution-based apps load the component in a different context than standalone apps, so issues that stay hidden elsewhere surface here.

Bundle size matters more than you think. Large PCF bundles (anything over ~500KB unminified) cause Studio to hang during load. Run pac pcf build --buildMode release to produce a minified bundle, then reimport the component into the solution. Many developers test with debug builds and never notice the size.

Check for circular dependencies in your manifest. If your control.xml references libraries or resources that conflict with what the solution already loads, Studio enters a resolution loop. Open the solution's component library and confirm no duplicate control names exist.

Specific things to try, in order:

Open the PCF project, run npm run build -- --buildMode release, then use pac solution add-reference to re-add the built component. Import a fresh managed copy into a dev environment.

Open your browser's DevTools console before adding the component to the screen. Watch for JavaScript errors or infinite network requests. That narrows down whether the problem is in init(), updateView(), or a dependency.

Test the PCF in isolation using the PCF test harness (npm start watch) to confirm it loads without errors outside of Studio.

If the component uses context.webAPI or context.navigation, those APIs behave differently inside solution Canvas Apps versus model-driven forms. Wrap those calls in try/catch with fallbacks.

Check if your environment has the "Code components for canvas apps" feature flag enabled in the Power Platform Admin Center under Settings > Features. If it's partially enabled or in an inconsistent state, Studio behaves exactly as you describe.

One more thing worth checking: if the component was built against an older version of the PCF framework, update your project references. Run npm install @microsoft/powerplatform-dataverse-service-client@latest and rebuild.

Thank you!
Proud to be a Super User!
📩 Need more help?
✔️ Don’t forget to Accept as Solution if this guidance worked for you.
💛 Your Like motivates me to keep helping