After cloning the repo, run the following in the cloned directory to start the example server
yarn && yarn workspace example developThe master branch should build and run fine (see that the homepage has a striped heading with the text "Customized Homepage in a user's site". Further branch descriptions can be found below.
Then checkout the 🪲 not working branch and run the same develop command:
git checkout folder-imports-not-working
yarn workspace example developWhen you reload the homepage you should see a frozen white page.
Finally, check out the final workaround branch to see a working solution:
git checkout folder-imports-workaround
yarn workspace example developAgain, look below for further details about the branches.
Please check out the following branches to see the different problems and workarounds.
This is just a starting point to show a normal usage of the system working, it can be skipped if you'd like to go straight to the problem.
Note: It also includes an identical gatsby-theme-minimal package that has a scope appended to the package name, which is also shadowed in the example site. This is just to show how to do a scoped package folder structure.
This example uses the folder pattern for components where the index.js is the component itself, and it's associated styles, tests, and stories live in the same folder.
Unfortunately this creates a circular import infinite loop clientside when attempting to shadow the folder.
This final example shows a workaround for the foldered components. It simply takes advantage of how imports go off of file names first then folders with an index.js by creating a file by the same name as the folder you wish to shadow.