PWA Magento2.3.5 Overwrite Logo Component in Custom Project

Question

Magento PWA Docs for overwrite a component such as Footer is found here:https://magento.github.io/pwa-studio/tutorials/pwa-studio-fundamentals/modify-site-footer/

So I'm assuming the same steps should be taken to overwrite any other component such as Logo:

What've done ins my pwa-custom project!

in my project folder pwa-custom

mkdir -p src/components/Logo

cp node_modules/@magento/venia-ui/lib/components/Logo/logo.js src/components/Logo

For testing I've edited logo.js and added console.log('here');

Create a src/components/Logo/index.js file with the following content to set the default component export for the Logo directory.

export {default} from './logo'

on yarn run watch no changes or compilation activates.

Does anyone have any idea what I'm doing wrong or missing?

Answer 1

Not so simple. One cannot overwrite Logo without first overwriting Header component:

main.js

return (
        <main className={rootClass}>
            <Header /> //Header imports Logo hence it need Header first!
            <div className={pageClass}>{children}</div>
            <Footer />
        </main>
    );

Same process to Overwrite Footer to follow for Header once Header has been overwritten the Logo overwrite will work!

Thanks