Search code examples
gatsby

how to deal with imports when shadowing component


When shadowing a Gatsby theme how does one deal with import calls to components that does not need any changes. From my understanding the only files that should be present in the directory if you are shadowing are the source code for the component you wish to change.

For example in original index.js, I have the following imports

import { graphql } from "gatsby"
import React from "react"
import CustomFonts from "../components/custom-fonts/custom-fonts"
import Footer from "../components/footer/footer"
import Header from "../components/header/header"
import SEO from "../components/seo/seo"
import Sidebar from "../components/sidebar/sidebar"
import "../styles/style.css"

If i wanted to shadow index.js how would i import these components? or would all the imports have to be present locally?

I think this is the relevant Gatsby documentation on this? https://www.gatsbyjs.org/docs/themes/shadowing/#extending-shadowed-files ,but im still some what confused after reading it.

Any help would be much appreciated


Solution

  • Well this turned out to be a really dumb question, just use the plugin resolve path under gatsby-config.js