Story generation not working as expected, missing args

[acc-nicholas]

Current Behavior

Run nx g @nx/react:stories --project:foo

Creates story files like:

// Foo.stories.tsx
export default meta;
type Story = StoryObj<typeof Foo>;

export const Primary = {
  args: {},
};

Expected Behavior

Run nx g @nx/react:stories --project:foo

Creates story files like:

// Foo.stories.tsx
export default meta;
type Story = StoryObj<typeof Foo>;

export const Primary = {
  args: {
    size: "small",
    other: "args here"
  },
};

GitHub Repo

No response

Steps to Reproduce

I'm not sure how to repro in the simplest way, but i think this might be it:

1. generate an nx workspace
2. generate an react component lib (or a js lib possibly)
3. generate a component, and add some custom props to its interface
4. generate a story for the component above

Nx Report

Node   : 18.19.0
OS     : darwin-arm64
npm    : 10.2.3

nx (global)        : 18.0.2
nx                 : 18.0.5
@nx/js             : 18.0.5
@nx/linter         : 18.0.5
@nx/eslint         : 18.0.5
@nx/workspace      : 18.0.5
@nx/devkit         : 18.0.5
@nx/eslint-plugin  : 18.0.5
@nrwl/tao          : 18.0.5
@nx/vite           : 18.0.5
@nx/web            : 18.0.5
typescript         : 5.3.3

Failure Logs

No response

Package Manager Version

npm v10.2.3

Operating System

• [X] macOS
• [ ] Linux
• [ ] Windows
• [ ] Other (Please specify)

Additional Information

I generated my libs with @nx/js instead of @nx/react because it seemed to align closer to my existing libraries i was migrating to nx.

[acc-nicholas]

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

[luchillo17]

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

[luchillo17]

@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.

[mamertofabian]

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.

[luchillo17]

@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.

[ccreusat]

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 ?

[leosvelperez]

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.

[luchillo17]

@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...

[leosvelperez]

@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 https://github.com/nrwl/nx/issues/22053#issuecomment-1990294825, 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.

[luchillo17]

@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...).

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.