Story generation not working as expected, missing args about nx HOT 10 OPEN

@acc-nicholas There are a few questions about the repro steps:

• When creating the new repo did you use react preset? or an empty project and added @nx/react manually?
• Standalone or Integrated project?
• Which builder did you use? the React preset has Vite, Webpack, and RSPack.
• What about test runner? Cypress or Playwright?
• Styles I would assume the default which is CSS modules.
• NX Cloud probably skipped it.
• Did you install the storybook package @nx/storybook?

In my local test I did this and without installing storybook I could generate a component with props just fine:

The only caveat I found with my tests was that I had to put my components folder inside the app folder, and that the props work as I expected, have to be named props, and have to be typed with an interface, inline types will not work:

Have yet to test inside a library... Tested in a library, same behavior.

from nx.

Related discord post: https://discord.com/channels/1143497901675401286/1209588204127256707

from nx.

I went on a little trip in that forum analyzing the @nx/react code and trying to figure it out, I thought the issue was the props of the arrow function not being named as props, I even used a TS AST viewer to check the props text name based on the TS utils used to grab the props interface:
https://github.com/nrwl/nx/blob/master/packages/react/src/utils/ast-utils.ts#L689-L706

from nx.

Thanks @luchillo17 . I was having trouble generating stories for my components. Placing them under the app or lib folder solved the issue for me. Not sure why it wasn't mentioned elsewhere or why we even have that restriction.

from nx.

@mamertofabian Worry not, I myself lost a good 15 min trying to make the happy path work until I moved the component into the app directory, this condition should be stated somewhere in the docs.

from nx.

Hi @mamertofabian @luchillo17

I have some issues as well.

First, true, I couldn't find a doc saying that components must be in a subfolder called lib .. Just have to find it yourself.
Then, it worked on 2 packages but not the third one. All three have the same structure:

react
  package-1
    src/lib/*
  package-2
    src/lib/*
  package-3
    src/lib/*

I can generate stories with nx g @nx/react:stories --project=1 and nx g @nx/react:stories --project=2 but not working on the third one.

On the third one, I have this error : Cannot read properties of undefined (reading 'text')

Ring a bell ?

from nx.

hey all!

Could someone provide a minimal reproduction? Or some detailed reproduction steps that lead to a state where the issue can be reproduced.

From this thread, I understand that the issue is mainly caused by having components outside of the app or lib folders, but I want to understand how you get to that state so I'm sure I'm solving the right problem and I don't miss anything.

from nx.

@leosvelperez Normally in an Nx monorepo it is the recommended practice to put your code either in the apps folder or the lib folder, anything outside of those should be config files, idk if that applies to packages-based monorepo though...

I think the issue stems from people doing packages-based monorepo but do not put their packages in a packages folder, idk what is the recommended folder structure from Nx for packages...

from nx.

@luchillo17 thanks for the info!

I don't think there's any issue with placing your projects inside a particular folder. From what you described in #22053 (comment), it would seem the issue is that the components are not within the app or lib folder within the project root. So, the issue seems to be caused by the placement of the components, not the projects. Nx doesn't enforce a particular folder layout to place projects anymore (with the as-provided format you can place them anywhere).

That said, the provided reproduction steps in the original report are not too clear and don't lead to reproduction. The reported issue mentions that stories are generated but without props, but I see something different: stories are not generated at all if the components are outside the app or lib folder (depending on the project type).

This is why I need proper reproduction steps to understand the issue reported here.

from nx.

@leosvelperez You're correct, the issue I had with the location of the file-blocking storybook generation is separate from the props issue, the specific conditions for the props issue are these:

• Either props are not named: The TS utilities that search for the component props search explicitly for function arguments named props.
• Or inline prop types: That same TS utility seems to ignore the props if it has inline types, you need to use a separate interface or type (actually, I can't remember if I tried a type for the props...).

from nx.