Component Props not rendering on V2

[jsplopes]

Bug Report

The bug #825 reported on previous version is now appening on version 2.0.0-rc.28.

Regards,
Júlio

[rakannimer]

Hey @jsplopes

Could you provide an example component that's failing and the mdx file that's importing it ?

It will help us reproduce your problem and hopefully fix it.

[jsplopes]

Hey @rakannimer
I'm currently using the repo that contains the gatsby example provided by docz.
I tried to clean up node_modules and .docz but the properties still not rendering.

I made some debug and the issue is the same as i mentioned previously on bug #825 when get the filename

the path is showing windows slash for path separator and the docz stateProps is unix.

[rakannimer]

Ok, thanks for reporting this.

@fi3ework's fix here : fi3ework@69c9cf9
is supposed to fix the filename path to make it platform-agnostic

Could you check which version of babel-plugin-export-metadata is being used in your node_modules

Unfortunately I can't debug more as I don't have a Windows machine.

Also, could you try running :

npx create-docz-app tmp-docz-test && cd tmp-docz-test && yarn dev

And let me know if it works as expected ?

[jsplopes]

Hi @rakannimer,
After executing the command

npx create-docz-app tmp-docz-test && cd tmp-docz-test && yarn dev

the issue remains :(.

The version of babel-plugin-export-metadata is 2.0.0-rc.1

[dreyks]

having the same issue on Mac with [email protected] and [email protected]

[rakannimer]

Hey @dreyks,

Are you also using Windows ?

[dreyks]

nope. MacOS

[dreyks]

I'm not sure I have the same issue though. It's just Props is not working for me. I'll try to debug this today

[rakannimer]

Oh sorry missed that in your previous comment !

Do these commands also fail ?

Development :

npx create-docz-app tmp-docz-test && cd tmp-docz-test && yarn dev

Building :

npx create-docz-app tmp-docz-test && cd tmp-docz-test && yarn docz build && yarn docz serve

[rakannimer]

Ok, if you can, make sure to provide the component where Props is failing and the mdx file using it.

[dreyks]

btw

npx create-docz-app tmp-docz-test && cd tmp-docz-test && yarn dev

gives me

Downloading files for example basic. This might take a moment.


Aborting installation.
Unexpected error. Please report it as a bug:
TypeError: e.destroy is not a function
    at e.forEach.e (/Users/dreyk/.npm/_npx/67694/lib/node_modules/create-docz-app/dist/index.js:2:35630)

[rakannimer]

Could you try again now ? You might have an older version of create-docz-app cached on your system that depends on the dev branch being defined (it was missing for around 1 minute)

[dreyks]

ok i figured this (the original issue) out. I have my components wrapped inside React.forwardRef, so obviously docz can't find its props

the npx works again too

[jesperorb]

fi3ework@69c9cf9 did fix the babel-plugin but there still seems to be something fishy in the docz-core which I am trying to solve here: #1151

[jesperorb]

@jsplopes Could you try with the latest rc 2.0.0-rc.54 and see if it fixes the issue?

[haohello]

I'm also having the same issue. As in my case, the component is actually wrapped in a factory method, not sure if this is the reason why it cannot be rendered. So here is the code just in case any of you could shed some light on this.

Here is the factory method

const createBox = (config: RenderComponentHookConfig<HTMLElement, BoxProps>) => {

  const {
    displayName = 'Box',
    className = 'ui-box',
    shorthandPropName = 'children',
    defaultProps,
    handledProps = [],
    /* eslint-disable react/forbid-foreign-prop-types */
    propTypes = {
      ...commonPropTypes.createCommon(),
    },
    contextMap = {},
    render
  } = config 

  const Box: CustomComponentType<HTMLElement, BoxProps> = 
    React.forwardRef((props: BoxProps, ref: React.Ref<HTMLElement>) => {
     // code to create the box below
    )
  }) as CustomComponentType<HTMLElement, BoxProps>

  Box.propTypes = propTypes
  Box.defaultProps = defaultProps
  
  return Box
}

And here is the code to call the factory method to create the box component

const config = {
  displayName: 'Container',
  className: 'ui-container',
  props: {}, 
  propTypes: {
    ...commonPropTypes.createCommon(),
    fluid: PropTypes.bool
  },
  defaultProps: {
    fluid: false
  },
  contextMap: []
} as RenderComponentHookConfig<HTMLElement, BoxProps>

const Container = createBox(config) as CustomComponentType<HTMLElement, ContainerProps>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mateussales98]

Alguém pode ajudar?

C:>npx create-docz-app docz-teste

Creating a new Docz app in C:\Users\mateus.sales\Documents\folder\docz-teste.

Downloading files for example basic. This might take a moment.

Aborting installation.
Unexpected error. Please report it as a bug:
TypeError: e.destroy is not a function
at C:\Users\mateus.sales\AppData\Local\npm-cache_npx\f6e6de91721365f0\node_modules\create-docz-app\dist\index.js:2:35630
at Array.forEach ()
at C:\Users\mateus.sales\AppData\Local\npm-cache_npx\f6e6de91721365f0\node_modules\create-docz-app\dist\index.js:2:35573
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async Promise.all (index 0)