Tag: react

  • Translating strings containing html with react-i18next

    Translating strings containing html with react-i18next

    We do a lot of React and a lot of translating. Our library of choice for internationalization is react-i18next. Recently we faced a challenge – we needed to render a text with dynamic text inside (based on local variables) but also needed some extra formatting – like a bold text of these specific values. When…

  • Adb reverse gives the error: more than one device/emulator

    When debugging a ReactNative app on a physical Android device, one can get an error that the device cannot connect to Metro. Usually, the error is related to the port forwarding not being set up (the laptop port 8081 should be exposed to the device port 8081). When you have more than 1 device connected…

  • 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.

    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…

  • EAS Build Fails on :app:bundleReleaseJsAndAssets_SentryUpload FAILED

    I’m trying to migrate a managed expo app from Expo Classic build to EAS. After doing all the changes mentioned on the Migration to EAS Page, I still got an error while trying to build with `eas build -p android` The error was > Task :app:bundleReleaseJsAndAssets_SentryUpload_24 FAILED[stderr] error: project not found Well, the error seems…

  • 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.

  • The new react hooks useShiny

    Recently a new proposal have been released to the ReactJS community – for React Hooks.  Roughly, the React Hooks are new ways to utilize the react features, that were previously available only via the JS class syntax.  I cannot hide my excitement for the hooks because they: Simplify the code that is written Make the…