[gatsby-theme-jodie] - Shadowing not working

[vedantkarandikar]

Description

Shadowing is not working for gatsby-theme-jodie

Steps to reproduce

Clear steps describing how to reproduce the issue. Please please please link to a demo project if possible, this makes your issue much easier to diagnose (seriously).

Expected result

Shadowed file should take precedence.

Actual result

Shadowing has no effect. Original theme file is getting used.

Environment

System:
OS: Linux 5.10 Manjaro Linux
CPU: (8) x64 AMD Ryzen 5 2500U with Radeon Vega Mobile Gfx
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 16.3.0 - /usr/bin/node
Yarn: 1.22.10 - /usr/bin/yarn
npm: 7.16.0 - /usr/bin/npm
Languages:
Python: 3.9.5 - /usr/bin/python
Browsers:
Chrome: 91.0.4472.114
Firefox: 89.0.2
npmPackages:
gatsby: ^3.6.1 => 3.10.1
gatsby-omni-font-loader: ^1.3.1 => 1.3.1
gatsby-plugin-gatsby-cloud: ^2.6.1 => 2.10.0
gatsby-plugin-google-analytics: ^3.6.0 => 3.10.0
gatsby-plugin-manifest: ^3.6.0 => 3.10.0
gatsby-plugin-netlify: ^3.6.1 => 3.10.0
gatsby-plugin-offline: ^4.6.0 => 4.10.0
gatsby-plugin-sitemap: ^4.2.0 => 4.6.0
gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.22 => 1.1.24
npmGlobalPackages:
gatsby-cli: 3.10.0

[vedantkarandikar]

I am shadowing to the file src/@lekoarts/gatsby-theme-jodie/components/footer.tsx

Why is it not working? Similar for all files
@LekoArts

[piccinnigius]

@vedantkarandikar any update?

[vedantkarandikar]

I recreated the project and manually imported the folder from node_modules and it works

…

On Thu, 2 Sep 2021, 21:51 Giuseppe Piccinni, ***@***.***> wrote: @vedantkarandikar <https://github.com/vedantkarandikar> any update? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#631 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKECPHPLQFFY7TZNNBJ72UDT76P7XANCNFSM5BAAEE6Q> .

[LekoArts]

Importing from node_modules won't work in a CI environment, only locally.

Please give a reproduction of your problem, shadowing works for me.

[vedantkarandikar]

To clarify, shadowing works for me as well. I just copy pasted the files from node_modules, must've either butchered the file structure or the names before

…

On Fri, 3 Sep 2021, 11:52 Lennart, ***@***.***> wrote: Importing from node_modules won't work in a CI environment, only locally. Please give a reproduction of your problem, shadowing works for me. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#631 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKECPHOQNIIX36QA3WV573DUABSSJANCNFSM5BAAEE6Q> .

[ynteb]

Where did you place the modified footer.tsx file? I also copied the file from the node_modules, made some modifications to it, however according to the shadowing tutorials it has to be place in a components folder and I'm unable to find that in the default project structure.

[loganmay]

Hey!

Thanks for the awesome gatsby starter, @LekoArts!

I'm having a similar issue with gatsby-theme-emilia. Here's my directory and tree:

➜  src git:(master) ✗ pwd
/Users/mlogan/projects/blog/src
➜  src git:(master) ✗ tree
.
├── @lekoarts
│   └── gatsby-theme-emilia
│       ├── components
│       │   └── project.tsx
│       └── texts
│           └── about-me.mdx
├── gatsby-plugin-theme-ui
│   └── index.js
└── pages
    └── 404.jsx

6 directories, 4 files

where blog is the directory where I cloned the starter via git clone https://github.com/LekoArts/gatsby-starter-portfolio-emilia blog

Only the shadowing for the text/about-me.mdx file is working. Changes to the other two files - components/project.tsx and gatsby-plugin-theme-ui/index.js don't appear to have an effect when running npm run develop. I tried reloading, hard reloading, as well as exiting and rerunning npm run develop. No luck.

Here's the exact code I'm running: https://github.com/loganmay/blog

Please let me know if I can provide any more info, thanks!

[stefanushinardi]

similar experience, can't seem to shadow project.tsx, but can shadow homepage.tsx

[iuryrosal]

I'm trying shadowing the projects.xml in src/@lekoarts/gatsby-theme-cara/sections, but it doesn't work =/

[rjames94]

Shadowing not working for me either. Tried about me and footer.ts

x

[IskIvanov]

Try adding the option mdx: true in your @lekoart theme plugin -example:

[gusmontoya]

@LekoArts
Shadowing not working for me. I am trying to change the floatng geometric svg images for the background. I copied all files from the node_modules : components, sections, and styles. My file path is:
Portfolio
| node_modules
| public
| src

• | @LekoArts
  ---- | gatsby-theme-cara
  ------ | sections

• | components
  --- | .tsx files ( about.tsx, contact.tsx, footer.tsx, hero.tsx, layout.tsx, project-card.tsx, projects.tsx ,seo.tsx, svg.tsx )
  ----- | Skills

• | context

• | elements

• | gastby-plugin

• | hooks

• | mock
  --- | data.js

• | pages

• | sections
  ---- | about.mdx
  ---- | contact.mdx
  ---- | intro.mdx
  ---- | projects.mdx

• | style

• | styles

• | templates

• | static

  The .mdx files work just fine but I can't seem to render the svg code I inserted into svg.tsx. I tested the svg code and it works. I defined the icon at the bottom of svg.tsx and inserted the name of the icon into the respective .tsx file (projects.tsx, hero.tsx, contact.tsx, about.tsx). I'm not sure what I am missing... I looked through all the files and don't see anything else I need to do.

My system: Old MSI GT70 2PC Dominator
OS: Win 10
CPU: Intel
GPU: Nvidia GTX 870M

Editor: VS Code

[ch4nd4n]

@vedantkarandikar if you want to shadow footer.tsx you can copy it from node_modules to src folder. Something like.
/src/@lekoarts/gatsby-theme-minimal-blog/components/footer.tsx

Do remember that you may need to restart the server and may have to clear the cache.

@gusmontoya
You can refer to my blog tutorial https://www.chandankumar.com/tutorial/gatsby-theme-shadowing-lekoarts/
it has reference to SVG in footer.tsx

https://github.com/ch4nd4n/chandankumar.com/blob/c7cfe0eb8afb9c34aa7ae5cfedd18ead61680aaa/src/%40lekoarts/gatsby-theme-minimal-blog/components/footer.tsx

[ynteb]

Where did you place the modified footer.tsx file? I also copied the file from
\node_modules\@lekoarts\gatsby-theme-jodie\src\components\footer.tsx
I made some modifications to it, and placed it in the folder (I had to create the \@lekoarts folder and all subfolders)
\src\@lekoarts\gatsby-theme-jodie\components\footer.tsx
My changes are not being shadowed and I'm not clear on what I am missing.

[ch4nd4n]

The location looks fine. Can you confirm that the footer compiles fine? Can you share your footer source?

[ynteb]

I actually just happened to resolve my issue after updating the gatsby-config. Could have been a cache issue or something like that but after updating the plugin options there my shadowing worked. Thanks though!

[AlvaroLima]

For anyone still struggling with this, it's probable that your doing everything correctly for the shadowing but your just no seeing the actual changes reflected. As pointed out here (https://stackoverflow.com/questions/69848307/issues-with-gatsby-shadowing)
"Try to clean .cache folder and re-run the dev. Every time you "shadow" or change the components in theme folder, you should do it."

Just run gatsby clean or npm run clean

Was pretty frustrating going through this but cleaning the .cache folder did the trick for me. Hope it helps.