I am looking to optimise my React app and would like to use the profiler within the react dev tools Chrome extension.
I tried to use it and saw that it says:
which made sense as I was still on an older version of React at the time (16.1.4 I believe). So I have since upgraded a little to ^16.8.6 and built & deployed the changes to my environment, but for some reason I am still seeing the message indicating that I am on a pre-16.5 version... I'm not sure what is wrong.
Also, I have a local express server to build and render things locally, and that seems to have no issues whatsoever, and will let me use the profiler...
Is there something in my build that is keeping it on an old version perhaps?
Related
I'm developing an application in ReactJS where I quite often push new changes to the the application.
When the users load upp the application they do not always get the newest version of the application causing breaking changes and errors with the express backend I have.
From what I have researched you can invalidate the cache using "cache busting" or a similar method. Although from all the questions I have seen on stackoverflow they have no clear consensus on how to do it, and the latest update was sometime in 2017.
How would one in a modern day ReactJS application invalidate the browsers cache in an efficient and automatic way when deploying?
If it's relevant, I'm using docker and docker-compose to deploy my application
There's not one-fits-all solution. Pretty common is adding some random hash to the bundle file, which will cause browser to process the file again from server.
Something like: app.js?v=435893452 instead of app.js. Most modern bundle tools like Webpack can do all of that automatically but it's hard to give you direction without knowing your setup.
I have a ReactJS web app that works with Firebase Cloud Functions.
Everything was running fine for a long time until I recently started doing some maintenance on the code and suddenly all of the Callable functions are giving me this error:
Failed to execute 'fetch' on 'Window': Illegal invocation at Service
It doesn't execute any server code so it's on the client, I am not sure what else to try. I am able to invoke the functions from GCP without any problems.
EDIT:
TL:DR; Firebase version 7.22.x was breaking the fetch call for me. Any version prior to that (I tested as low as 7.5.x) worked without any problems.
So after debugging more and more, I decided to work with more restricted versions in my package.json.
At first I was suspecting that either Firebase, React or TS might be breaking something.
I started playing with Firebase versions. In my package.json, I was using Minor Versioning with the version set to ^7.5.0.
I restricted the versioning further by using Patch Versioning (~7.5.0) and all the sudden, this error was gone!
To pin-point which version was the trouble (also I wanted to use the latest I can), I started incrementing the versions up to the most recent (7.22.x at this time).
I found out that the latest version that works for me was ~7.11 and that's where I am gonna stay at until the root cause is fixed.
It appears fixed (based on their release notes) in 7.22.1 and later:
https://firebase.google.com/support/release-notes/js#version_7221_-_october_5_2020
In React Native apps, should you try to keep all libraries/modules on their latest versions? How do you approach this?
As per say, it's always better to upgrade the libraries frequently and use those libraries which are popular. Suppose you use an old library which uses componentWillMount and that's deprecated. So it may cause some sideissues in your app which you want be able to trace.
But as like ruain change, you should always look for the modules before updating, like react-navigation almost the complete flow is different in v5 and v4 , so you need to change your app flow and also test the whole app again. Similiarly in react-firebase v5 and v6 is totally differnt.
TL,DR: Yes , you should update , but after updating check all the changes in modules and test your whole app again.
Hope it helps. feel free for doubts
I try to migrate after a certain time, as the most recent ones always come with great instability.
An example of this is the new version of:
react-navigation
version 5
is not dealing very well with the react-native-cli version, but is getting along very well with the expo
I'm just curios about this situations creating app with React Js. Is there any way to build directly on the hosting Cpanel not on localhost during development? I don't know if this question is right I'm new about this but how about if were done developing on local then build and upload to server, if there is small changes of the application then you can't change directly on the server because the code is bundle and minified. I tried to search on google and watch tutorials but can't find it. I know there nothing wrong to build on local, however I like the point that while i'm building I know it works very well and see it on live then if there is small changes I could change directly.
Apologies to my curiosity. Thanks in advance for your ideas and correcting me.
I'm not sure if react requires bundling. It is not so big itself. One useful way that you can do it, just build your react app in local, then create a git repository, push it to there then from there you can pull it to your server by connecting your server with SSH.
This way may require some installations on server side again with SSH connection. You can search the details about the way I suggest you.
Appreciating your curiosity, I can think of two possible (not at all recommended though) solutions.
1. Dump jsx
React applications requires a build process primarily for JSX syntax. It is developer intuitive. If there is no jsx in your code no need to build. So, this jsx
return (
<h1>Greetings, {this.props.name}!</h1>
);
Should be written as this js
return React.createElement('h1', null, 'Greetings, ' + this.props.name + '!');
2. Setup development environment in Server
This is a risky one. There're possible security issues.
Its like have a centralized code base on the server that anyone with access can modify.
Here, you can edit files & run build task directly on server.
Notes:
Today's basic development flow is code -> build -> deploy. Better stick with it for serious applications.
I'm using MSpec to drive some automated UI tests using Selenium WebDriver. Much like the examples I found online. I'm having problems getting it to take screenshot when the test fails.
I saw a comment on another issue where it works because they have a ResultSupplementer in the sample web specs. However, ResultSupplementer does not seem to exist in the latest version of Mspec (0.9.1).
Is there a different way to do this in the latest version of mspec? Ultimately, I'm going to generate HTML reports as TeamCity artifacts and include the screenshot on any failing specs.
I've updated the samples for the latest version of MSpec (in short, you need to implement ISupplementSpecificationResults yourself).
I've also merged the solutions and converted the MVC project to Nancy. You'll find that there's a bit more infrastructure-related code that grew over the last couple of years and works around various things, like
status codes 4xx and 5xx logged by IIS Express
IIS and Chrome Driver ports bound by other processes
page objects access the web driver with a high-level API
I use Paket for dependency management because it's far more powerful than plain NuGet
All that said, you need to run msbuild.exe mspec-samples.sln and then All-Specs.cmd. I've also checked that a TeamCity build creates screenshots.