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 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 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!