Shadow theme components and styles missing in production build when themesDir is provided

[mrfelton]

Bug Report

Seems like the issue in #1056 may not have been fully resolved. Still some things are not being set up properly in a production build.

It's ok if you run yarn dev before you build and serve, but if you don't then some things are missing from the production build, such as shadowed theme components and styles.

To Reproduce

Compare:

git clone https://github.com/LN-Zap/zap-tutorials
cd zap-tutorials
yarn develop

with:

git clone https://github.com/LN-Zap/zap-tutorials
cd zap-tutorials
yarn build
yarn serve

Notice that the header looks completely different - this is because the shadow components and styles are missing if you don't dev before you build.

[rubencustodio]

I am also facing this issue and I won't be able to build a production version until this is fixed. My shadow components are based on my company's style guide and it won't look correct without it.

[rakannimer]

Hey,

As @brandonarbini said in #967 the issue is that docz is not copying the base directory (defaults to src) to the .docz directory before building and relying on dev being called before build.

If someone would like to submit a PR to fix it I'd be happy to help/review/merge.

If you can't, no problem. I'll get to it later this week !

[rakannimer]

Hey this was fixed in 2.0.0-rc.42

Could you give the latest rc a try ?

[mrfelton]

Hi,

No this still doesn't work correctly.

Compare a build of https://github.com/LN-Zap/zap-tutorials with/without doing yarn dev first.

[rakannimer]

Should be fixed in 2.0.0-rc.51 tried zap-tutorials locally with it and it worked. Could you confirm ?

[mrfelton]

Still not working right :(

Compare the page layout, the fonts, the top menu etc.

The content of .docs/src is wrong after the build. It contains only .docz/src/pages/404.js where as it should contain all of my shadow components like it does if I run yarn dev before the build.

[rakannimer]

Hmmm I think the update didn't go right, here's what it looks like after running yarn add docz@next on my installation :

Could you try removing your yarn.lock file .docz folder and node_modules and trying again ?

rm -rf .docz node_modules yarn.lock && yarn add docz@next && yarn docz build && yarn docz serve

[mrfelton]

Ok, my bad. I guess I had a stale lock file and some old deps. Looks good now. Thanks for working on this 👍

[simonrelet]

Hello,

It looks like the issue is still here when the themesDir option in doczrc.js is set to a value other than 'src'. After investigation I think it is caused by this line in which gatsby-theme-docz is copied to docz's folder but themesDir is preserved in the destination path instead of coping it to .docz/src/.

For example:

// doczrc.js
export default {
  // ...
  themesDir: 'theme',
  // ...
}

Will give the following structure:

.
├─┬ .docz/
│ ├── src/
│ └─┬ theme/
│   └── gatsby-theme-docz/
├── src/
└─┬ theme/
  └── gatsby-theme-docz/

theme/gatsby-theme-docz/ is copied to .docz/theme/gatsby-theme-docz/ instead of .docz/src/gatsby-theme-docz/.

I can submit a PR to fix it if it helps.

[rakannimer]

Hey @simonrelet

Thanks for reporting this, a PR would be great !

It looks like the issue is still here when the themesDir option in doczrc.js is > set to a value other than 'src'. After investigation I think it is caused by this line in which gatsby-theme-docz is copied to docz's folder but themesDir is > preserved in the destination path instead of coping it to .docz/src/.

I agree 👍

Feel free to join the project's slack if you have any questions or face an issue while submitting : slack link.

[rakannimer]

This should be fixed by @simonrelet's PR released in 2.0.0-rc.64.

Versions >= 2.0.0-rc.64 should work as expected. Going to close this, please feel free to re-open if it occurs again.