Magento 2: Override Library Files

I discovered a problem with Magento 2 – the images weren’t scrolling properly on the product page when viewed on a mobile device. To fix this, I found a JavaScript (js) file in the ‘lib’ directory and made changes to address the issue.

After searching extensively for a solution, I initially decided to directly modify the file. However, when I later upgraded my site to a newer version of Magento, I realized that my changes were undone, and I wasn’t aware of the alteration in the library file for a long time.

To tackle this, I created a patch for the ‘lib’ file, successfully fixing the bug. Unfortunately, with subsequent releases on the production environment, I faced the same problem – my changes were accidentally removed due to mistakenly stashing Git changes on the server.

This made me realize that creating patches for the ‘vendor’ directory has been effective in avoiding such problems. The ‘vendor’ directory is included in the .gitignore file, preventing tracking changes and unintended removal of modifications. However, the ‘lib’ directory is not in the .gitignore, leading to these issues.

In the end, I decided to override the ‘lib’ file to permanently fix my issue and avoid future problems during upgrades or releases. I have two methods to achieve this – either override the file at the theme level or create a custom module and override the file using the require-config.js file.