Piyush Dankhra

moon indicating dark mode
sun indicating light mode

Last updated: January 12, 2022

Override the component in the PWA Studio extension

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 Magento 2 custom extension, we override the class using the preference in di.xml. Similarly, let’s check how we can override the component file in PWA Studio.

I am assuming the extension is created using the PWA Studio extension generator

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 this highlight 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);
});
};

In componentOverrideMapping variable, can add a list of files that 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, 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';

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

Cheers!


I'm Piyush Dankhra
Adobe Certified Expert - Adobe Commerce Developer / Front-End Developer / Business Practitioner
Adobe Subject Matter Expert - Adobe Commerce Front End Developer
Working on Magento 2 / PWA Studio