Docz: Build fails if components are put into sub-directory

[patrick-radulian]

Bug Report

Describe the bug

Building Docz fails with the following error, after moving the Button component into a sub-directory of /src/components.

To Reproduce

1. npx create-docz-app docz-app-typescript --example typescript
2. move Button.mdx and Button.tsx from /src/components into /scr/components/Button
3. npm run dev

ERROR #98123  WEBPACK

Generating SSR bundle failed

Can't resolve '..\..\..\..\..\src\components\Button\Button.tsx' in 'C:\Users\Radulian\Documents\Git\docz-app-typescript\.docz\.cache\caches\gatsby-plugin-mdx\mdx-scopes-dir'

File: .cache\caches\gatsby-plugin-mdx\mdx-scopes-dir\68555f3baf2d551b7b9c1c26ccddc79b.js

Expected behavior

Docz should build successfully.

Environment

• docz version: next
• OS: Windows 10
• Node/npm version: Note 12.13.0 / npm 6.13.0

Additional context/Screenshots

[rakannimer]

Hey @patrick-radulian

I think this was fixed in a recent release candidate.

I tried re-doing your steps with [email protected] and it worked as expected.

Could you try updating and checking ?

EDIT: Or maybe your cache had stale data. You can clear it by deleting the .docz directory and running docz again.

[bmcmahen]

I was having this same issue a few versions ago, but looks like it's been fixed in the most recent rc. Thanks @rakannimer!

[rahul3103]

@bmcmahen @rakannimer Hey I am getting same error as my components are nested. I am using docz v2.1.1

[rakannimer]

Hello

Could you please provide more information :

1. Did you try deleting the cache ?
2. Can you copy the complete error you're getting ?
3. Can you provide a repo or steps to reproduce ?

[rahul3103]

Its working for me now but there is huge problems with constants which I am using inside react componets.

import styled from 'styled-components';
import IconButton from '@material-ui/core/IconButton';
import PropTypes from 'prop-types';
import { BgColors, Spacings, ShadowColors } from '../../../styleConstants';

const StyledIconButton = styled(IconButton)`
  &.MuiIconButton-root {
    background-color: ${BgColors.WHITE};
    border-radius: ${Spacings.SPACING_2B};
    height: ${Spacings.SPACING_8B};
    width: ${Spacings.SPACING_8B};
    box-shadow: ${Spacings.SPACING_0B} ${Spacings.SPACING_4B}
      ${Spacings.SPACING_8B} ${ShadowColors.COURSE_CARD_SHADOW};
    padding: ${Spacings.SPACING_0B};
  }
  &:hover.MuiIconButton-root {
    background-color: ${BgColors.WHITE};
  }
`;

const IconButtons = ({ children, ...rest }) => (
  <StyledIconButton disableRipple {...rest}>
    {children}
  </StyledIconButton>
);

export default IconButtons;

IconButtons.propTypes = {
  children: PropTypes.node.isRequired
};

Than I have to create IconButton.docz.jsx

/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable import/prefer-default-export */

import PropTypes from 'prop-types';
import SIconButtons from './IconButtons';

export const IconButtons = props => <SIconButtons {...props} />;

IconButtons.propTypes = {
  children: PropTypes.node.isRequired
};

And its working but I am getting following errors

warn "export 'IconButton' was not found in
warn "export 'IconButton' was not found in './IconButtons.jsx'
warn "export 'IconButton' was not found in './IconButtons.jsx'
warn "export 'IconButton' was not found in './IconButtons.jsx'
warn "export 'IconButton' was not found in './IconButtons.jsx'
warn "export 'IconButton' was not found in './IconButtons.jsx'
warn "export 'IconButton' was not found in './IconButtons.jsx'
warn "export 'IconButton' was not found in './IconButtons.jsx'
warn "export 'IconButton' was not found in './IconButtons.jsx'
warn "export 'hasOwnProperty' (imported as 'BgColors') was not found in
warn "export 'hasOwnProperty' (imported as 'BgColors') was not found in
warn "export 'hasOwnProperty' (imported as 'BorderColors') was not found in
warn "export 'hasOwnProperty' (imported as 'BorderColors') was not found in
warn "export 'hasOwnProperty' (imported as 'Fonts') was not found in './constants/fonts'
warn "export 'hasOwnProperty' (imported as 'Fonts') was not found in './constants/fonts'
warn "export 'hasOwnProperty' (imported as 'ShadowColors') was not found in
warn "export 'hasOwnProperty' (imported as 'ShadowColors') was not found in
warn "export 'hasOwnProperty' (imported as 'Spacings') was not found in './constants/spacings'
warn "export 'hasOwnProperty' (imported as 'Spacings') was not found in './constants/spacings'
warn "export 'hasOwnProperty' (imported as 'TextColors') was not found in
warn "export 'hasOwnProperty' (imported as 'TextColors') was not found in