Screen flickers when testing a React-based app locally

[Khoushik_Sankar]

A customer is facing an issue while running a custom app locally, which is a React-based app. While running the app in local, the screen starts flickering and doesn’t stop. The page loads for a while and flickering starts again.

We obtained the app code and tested this but we are unable to reproduce the issue. However, the flickering seems to be occurring for the customer. Have attached the app code, HAR file,
and a screencast of the issue.

OS: Windows 10
Browser version: Google Chrome Version 96.0.4664.110 (Official Build) (64-bit)

Can we please check what possibly could be causing the issue?

[shravan.balasubraman (Shravan)]

Hey Khoushik

I was able to reproduce this issue in windows as well. On checking, I saw this error in the console window

babel.min.js:13 You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup

​

The flickering issue most likely happens because of the babel compiling scripts in-browser which in turn is emitting events in loop

The correct way to set up a react app using fdk is to use fdk create command and choose your_first_react_app template from it. Change all the app code to this format where the babel precompiles the scripts.

Closing this ticket for now. Please follow up on the community forum where I will add the same response