YosepRA posted: " So… I got my first taste of compatibility issues and the headache of solving its puzzle yesterday. And I tell you this, ladies and gentlemen, it was NOT FUN. It wasn't frustrating enough to drive me into madness, but it definitely drove me to the point o"
So… I got my first taste of compatibility issues and the headache of solving its puzzle yesterday. And I tell you this, ladies and gentlemen, it was NOT FUN. It wasn't frustrating enough to drive me into madness, but it definitely drove me to the point of mental exhaustion where all I can do after that was laying down on my bed like a potato, unmoving and unperturbed. But in the end, I solved it after accepting a point of compromise and I had a good night sleep.
Here is the story. I've finished all I needed on integrating Cloudinary into PetTake. I have my routes ready and I have updated my pet's data structure to fit Cloudinary's requirements. Everything is sunshine and daisy as I was getting ready to work on the front-end. And right at the moment of typing create-react-app's start command, it failed to compile the files. Well shoot, here we go again. And off to hell I go.
The problem I was having surrounds these main packages/tools:
Create-React-App (CRA).
ESLint.
eslint-config-airbnb.
Prettier.
eslint-config-prettier.
eslint-plugin-prettier.
The main motivation to solve this problem is my stubbornness to use ESLint, extended with Airbnb spec and Prettier rules. I don't know where to start with this since it was such a rabbit hole where if I fix one problem, two more occur. I think I can start with ESLint inability to read the "prettier/prettier" rule. I think the error message goes like this, "context.getPhysicalName is not a function". At this point, I'm sure I had the latest version of everything except CRA which I still use version 4. But ESLint refuses to do its work until I have the perfect configuration file. Shaking my head…
What comes to that was a little tour of downgrading all of Prettier-related packages, but to no avail as the problem remains. I tried to downgrade ESLint from version 8 to 7. Again without any result since it clashes with Airbnb config peer dependencies. There is a simple solution however which is to delete "prettier/prettier" rule, to which I did because I want to see the dev server working first.
Deleting the "prettier/prettier" rule works a charm and I can run the dev server. There was a problem in regards of JSX syntax, and again ESLint refuses to work until every star is aligned. It suggests me to install "@babel/preset-react". But since I don't directly use Babel, and as long as I've been using CRA, it never suggest me to install any Babel related packages, then I come to a conclusion that I may need to install some sort of React-related ESLint config provided by CRA. I read the past version of my ESLint config using GitHub, and I found that I need to extend ESLint with "react-app" configuration. I installed it and it solves the problem.
I don't remember whether I had it all working at this moment because spoiler alert, this is the point of compromise which I talked about earlier. A compromise where I need to abandon Prettier. But the me at the time still not satisfied until I integrate everything and get it working, that means I also need to include Prettier into the mix. Then I added the "prettier/prettier" rule back into ESLint config, and so the earlier problem resurfaces as I tried to tackle. Little did I know that this is where I enter the hell of compatibility issues.
Environment variables in create-react-app.
Compared to the previous problem, I didn't have a catch whatsoever on this one. Off to Google I go. In StackOverflow, I found a suggestion to install ESLint version 7 and "react-scripts" version 4.0.1. I did just that and then further into the hell hole I go. To my great surprise, now CRA dev server can't start because there's an ESLint error. Why is it a surprise? Well, because I have solved this problem way too long ago, which is to add "ESLINT_NO_DEV_ERRORS" set to true in environment file. I don't remember messing with the environment file, but I checked it regardless. And… The necessary variable is still there. I went and check the CRA website to see if I made a typo, and no I didn't.
Checking packages' peer dependencies.
Installing "react-scripts@4.0.1" was a massive turning point as I enter the rabbit hole. Right after this was a series of upgrading and downgrading all of the ESLint packages, reading each of the packages peer dependencies, and the suffering of restarting CRA dev server (or Webpack's to be precise) which is notoriously slow to compile in this old laptop of mine. I don't even want to retrace everything and talk over it since I probably have a trauma of it. It was not a pleasant experience to have. Of course this experience may not be much for seasoned veterans who probably have faced a nastier compatibility problem when dealing with legacy codes. But I will restate it as many times as I could, it was not a pleasant experience.
That was a cycle of hell as I go through the process of giving up and not giving up. My persistence to use ESLint and Prettier is the cause for this hell, but also the motivation that kept me driving forward. Everything was hell until I found someone say in StackOverflow that CRA's refusal to compile with ESLint errors to have been solved in "react-scripts@4.0.3". I paused for a second and thought "Wait… Is that the version that I used previously?" I then tried to install said version, remove the "prettier/prettier" rule, and run the dev server. Voila… It was working again. I had my head on the table, and my arms dangling lifelessly and helplessly as I laugh at the comedy life has thrown to me. All of those rabbit hole and labyrinth, just for me to get back to my starting point. Oh life, my dear… That was funny. Yes, you can definitely see my laughing face.
It works... Finally.
All in all, again, I come to a point of compromise with not using extending ESLint with Prettier this time. I can't be bothered with this anymore. No, I don't want to be bothered with this anymore. I ran the back-end server, CRA dev server, and tweaked a bit of the front-end GraphQL query strings. And thus I got the first view of the app working successfully for the whole day.
What's the lesson for today? Meh, It's persistence, I guess? Good old magic word, indeed. I don't even have any energy to rant about how sometimes unpleasant it is to work with ESLint and CRA. But I've learned my lesson, and I believe this will be valuable later on the long road ahead. For now, let me god damn finish PetTake's image service upgrade, will you? Well, that was all. Thank you for reading my journal and have a very nice day.
No comments:
Post a Comment