Gatsby-theme-novela: Component shadowing

[mabasic]

Describe the bug
Component shadowing does not work for files with a . inside the filename.

Additional context
More details in PR https://github.com/narative/gatsby-theme-novela/pull/97

Follow the progress of this to resolve: https://github.com/gatsbyjs/gatsby/pull/16424

Just wanted to open this issue for easier following of the progress of this issue.

[jpvalery]

Looking forward to the fix from Gatsby as my project is currently at a standstill without this feature 😅

[mabasic]

@jpvalery I've managed to work around this issue by using component shadowing on files that do not have a dot in the filename but are parent files and then inside those files import my own shadowed files without a dot in the filename.

[jpvalery]

Hmmm not sure to understand. How would that work for Articles.Hero.tsx for instance?

[mabasic]

You can't shadow Articles.Hero.tsx with this approach because it is imported in articles.template.tsx which also has a dot in the filename. If you go one step above that; articles.template.tsx is imported in gatsby-theme-novela/gatsby/node/createPages.js which I think can't be shadowed.

For a working example. You can't use component shadowing for Navigation.Footer.tsx, but you can shadow Layout.tsx which imports that file and then replace the import line from import NavigationFooter from "@components/Navigation/Navigation.Footer"; to import NavigationFooter from "../Navigation/Footer"; Copy file Navigation.Footer.tsx, rename it to Footer.tsx and make modifications inside that file.

See here for code: https://github.com/laravelista/laravelista.github.io/tree/develop

[brotzky]

Nice share, that would definitely work.

Really hope we're able to get shadowing working soon from Gatsby core. Seems be a reoccurring issue amongst Novela users. Unfortunate how our filenames cause it to break -- wish I realized when we started!

[jpvalery]

@mabasic Yeah, my use case being on the Articles.Hero.tsx, I think I'm better to just wait for the fix from Gatsby :/
Although your example for Navigation.Footer.tsx could work for the other use case, I'm just unsure about doing the effort to do the workaround vs wait for the global fix :)

@brotzky no worries man, it's just an unfortunate edge case :)

[ChristopherBiscardi]

The fix has been merged. waiting for a release.

[jpvalery]

Amazing news @ChristopherBiscardi ! Thanks for updating us :)

[brotzky]

Thank you, @ChristopherBiscardi!

[jpvalery]

This has been published in [email protected]. Whenever Novela updates to this dep this issue can be closed

In the mean time, I'm updating my package.json and will report if any issues arise

Update: it works :)

[brotzky]

fantastic. will update today

[brotzky]

Fix is published. Shadowing should work now 🙆‍♂!

v0.6.2