Override the component in the PWA Studio extension | Magento Hyva

After setting up and installing the extension in your PWA Studio project, the common question that arises is:

How can I override the core component of PWA Studio in my custom extension?

In a Magento 2 custom extension, we override classes using preference in di.xml. Similarly, let’s check how we can override component files in PWA Studio.

I am assuming the extension is created using the PWA Studio extension generator and registered in the package.json.

yarn create @larsroettig/pwa-extension

For example, to override the component @magento/venia-ui/lib/components/Footer/footer.js.

In your extension, edit the <pwa-extension>/src/intercept.js file with the highlighted code:

const moduleOverridePlugin = require('./moduleOverrideWebpackPlugin'); 
const componentOverrideMapping = { 
    '@magento/venia-ui/lib/components/Footer/footer.js': './lib/components/Footer/footer.js', 
    // add comma-separated files
}; 

module.exports = targets => {
    targets.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
        flags[targets.name] = { esModules: true, cssModules: true };
    });

    targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => { 
        new moduleOverridePlugin(componentOverrideMapping).apply(compiler); 
    }); 
};src/intercept.js

In the componentOverrideMapping object, you can add a list of files that you want to override.

After copying the file @magento/venia-ui/lib/components/Footer/footer.js to <pwa-extension>/src/lib/components/Footer/footer.js, edit the footer.js file and replace the import paths with the relevant package paths so it points to the correct import path of the core component. For example:

// import Logo from '../Logo';
import Logo from '@magento/venia-ui/lib/components/Logo';
// import Newsletter from '../Newsletter';
import Newsletter from '@magento/venia-ui/lib/components/Newsletter';
// import { useStyle } from '../../classify';
import { useStyle } from '@magento/venia-ui/lib/classify';
// import defaultClasses from './footer.module.css';
import defaultClasses from '@magento/venia-ui/lib/components/Footer/footer.module.css';
// import { DEFAULT_LINKS, LOREM_IPSUM } from './sampleData';
import { DEFAULT_LINKS, LOREM_IPSUM } from '@magento/venia-ui/lib/components/Footer/sampleData';src/lib/components/Footer/footer.js

Then make changes in the component file and rebuild your PWA Studio project.

Cheers!