Category: ReactJS
-
NX Dev Not Replacing an Environment Variable in a React Project
TL;DR: %ENV_VAR% => %NX_ENV_VAR% We are using nx.dev to build a set of apps and libraries for one of our clients. Recently we found out that a CI/CD script we use to set the version number in the index.html file of the react apps was not working. It simply appends a GET parameter to a…
-
NX.dev – Problems with buildable libraries.
We are building a shared UI platform for one of our clients where we decided to store the code in a monorepo and use nx.dev to help us with the code organisation, dependencies, builds, etc. When trying to set up the common libraries of the project as publishable (and buildable) libs, we run into compilation…
-
Grafana Panel Not Refreshing in Real-time (sometimes)
For one of our clients, we’re using Grafana to display charts for the device data. These charts (panels) are embedded in a React app as iframes. Recently we noticed a strange issue with one of the embedded charts. The bar chart values were updated, but not their colouring. If one would reload the iframe URL,…
-
In a React app, I need to press the back button 2 times in order to go to the previous page
In case you have such an issue, and verify that you don’t call history.push() 2 times, check your content for an iframe. TL; DR: React tries to minimize re-rendering and will reuse the iframe element by just changing its src. This will update the history object, which is apparently shared with the main page (and…
-
React Drag And Drop not working with AnyDesk
We had a very strange issue with a project we work on. Our React app supports drag-and-drop of devices on a floorplan, using react-dnd. Everything works just fine locally and on our servers, but once the UI is deployed to the production machine (that is accessible via intranet), the drag-and-drop stopped working. Debugging the production…
-
React Native Shadow is Missing on iOS but is Okay on Android
In one of our projects, some of the items that had a shadow, was working just fine on Android, but the shadow was missing on iOS. After investigating it, it turned out to be related to the items that had overflow: ‘hidden’, which on iOS resulted in shadow being trimmed. Turns out on iOS, the…
-
SentryError: Native Client is not available, can’t start on native when updating expo-cli to 4.x.x (from version 3.22.3)
TL;DR: Update your metro.config.js to use @expo/metro-config based on the latest guidelines (SDK 40+) – It’s funny when you encounter an error in a project, and after spending a lot of effort researching it, to find out that the cause is the same with a totally different error on a very different project. In my…
-
Getting an error while trying to debug JEST tests
Do you get something like:“Error: Cannot find module ‘D:\project_folder\package.json’”And your require stack contains paths.js, env.js and test.js? Well, you have to both configure the runtimeExecutable and the cwd. This error is because you’re running the tests from outside your directory.
-
Wondering how big is your React project?
Recently I wanted to explore the impact of a refactoring I did so I ended up checking the length of the files I’ve had in git (hoping that this number would decrease). The magic command was to list the files in git, grep the ones ending with js, jsx and css and count the lines.…
-
Testing with Jest in a node and ReactJS monorepo (and getting rid of environment.teardown error)
Big number of the applications we develop have at least one ReactJS UI, that is held in one repo and an API, held in another. If we need to reuse some part of the code, we do so by moving it to another repository and adding it as a git submodule For our latest project…