For posterity. Manually trying to implement component shadowing with Gatsby. So glad this is backed in by default.  😅

with-theme-path.js

exports.withThemePath = (relativePath, root = __dirname) => {
    const qualifiedPath = relativePath.replace('./src', `${root}/src`);
    let qualifiedResolvedPath = path.resolve(qualifiedPath);
    let finalPath = qualifiedResolvedPath;

    const theme = path.basename(root);
    const themedPath = relativePath.replace('./src', `./src/${theme}`);
    let themedResolvedPath = path.resolve(themedPath);

    try {
        require.resolve(themedResolvedPath);
        finalPath = themedResolvedPath;
    } catch (e) {
        try {
            finalPath = require.resolve(qualifiedPath);
        } catch (e) {
            return relativePath;
        }
    }

    return finalPath;
};

Don't use this. I am just preserving this code to remind me that in future if I want to go on a crazy component shadowing wild goose chase, I really should just check my file names properly. So easy to miss a simple misspelled filename. Curse you plurals! 😂