Easiest Way to Override Component and Files in Magento 2 PWA Studio

As we all know Magento 2 PWA Studio provides a way to override and extend features according to your need. But, the default way is a little hard to follow during the whole development process. So, in this article, I'll explain to you the most straightforward way to override components and files in Magento 2 PWA Studio.

First of all we need to insall one node package using the below command.

Add one plugin to the dev dependencies

To insall this package go to the root of your PWA Studio project folder and run the below command.

saveCopyzoom_out_map
npm i -D @mayankzalavadia/magento-2-pwa-studio-override-mapping-webpack-plugin

Or

saveCopyzoom_out_map
yarn add -D @mayankzalavadia/magento-2-pwa-studio-override-mapping-webpack-plugin

This plugin is used on Magento PWA Studio project. It give you an easiest way to override Components and Files.

How to create a new override

So, first of we need to create a new folder called override inside the src folder. So, go to the src folder and run the below command.

saveCopyzoom_out_map
mkdir override

Now, let see one example to override the @magento/venia-ui/lib/components/Logo/logo.js.

To override the logo.js file you just need to follow the same folder structor under the src/override folder. So, our logo.js file is available under the below path.

saveCopyzoom_out_map
src/override/@magento/venia-ui/lib/components/Logo/logo.js

Note: You need to change all the imports paths like the below example.

Before

saveCopyzoom_out_map
import React from 'react';
import { useIntl } from 'react-intl';
import PropTypes from 'prop-types';
import { useStyle } from '../../classify';
import Image from '../Image';
import logo from './VeniaLogo.svg';

After

saveCopyzoom_out_map
import React from 'react';
import { useIntl } from 'react-intl';
import PropTypes from 'prop-types';
import { useStyle } from '@magento/venia-ui/lib/classify';
import Image from '@magento/venia-ui/lib/components/Image';
import logo from '@magento/venia-ui/lib/components/Logo/VeniaLogo.svg';

All the relative imports need to be changed, so, it should be like the above code.

This plugin works with all dependencies inside the node_modules folder. So, All you need to do is to get the file path that you want to override and create the same structure.

Important Note

You should not add new components or files to the override folder, since the Webpack will search for the path that you created (Inside the override folder) and will try to find a file with the same path inside the node_modules folder.

If you create a new component (Which doesn’t exist inside the node_modules folder) you should add this component to the src/components folder.

That’s it!

I hope this way to override component and files in Magento 2 PWA Studio helped you to find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other handy commands which are not included in the list.

P.S. Do share this note with your team.