Storybook does not work if staticDirs is defined from .storybook/main.js even though there is nothing defined about staticDir on project.json

[iamrommel]

This happens on 13.8.6+ after this pull request merge (#8885 (comment)). I discussed also some details on pull request but i'm not sure if it will be fixed so I decided to put it here as i feel this is really an issue on the release.

Current Behavior

There is an error on running storybook target, maybe the image below will explain more.

Expected Behavior

-When there is nothing defined on project.json for staticDirs config, it should work fine (just like version 13.8.5 and below) and should follow what was defined on .storybook/main.json.
-When there is staticDirs on storybook config, and have it also on main.js, then should throw error
-When there is staticDirs on storybook config and nothing on main.js then it should work fine and use the staticDirs defined on project.json

Steps to Reproduce

Just create a project with storybook, and on the .storybook/main.js add the staticDirs field. Do not add staticDirs on project.json storybook config

Failure Logs

Check the image above

Environment

iamrommel@Rommels-MacBook-Pro ztech-apps % nx report

NX Report complete - copy this into the issue template

Node : 16.14.0
OS : darwin arm64
yarn : 1.22.17

nx : 13.8.8
@nrwl/angular : undefined
@nrwl/cli : 13.8.8
@nrwl/cypress : 13.8.8
@nrwl/detox : undefined
@nrwl/devkit : 13.8.8
@nrwl/eslint-plugin-nx : 13.8.8
@nrwl/express : 13.8.8
@nrwl/jest : 13.8.8
@nrwl/js : 13.8.8
@nrwl/linter : 13.8.8
@nrwl/nest : undefined
@nrwl/next : undefined
@nrwl/node : 13.8.8
@nrwl/nx-cloud : 13.1.6
@nrwl/react : 13.8.8
@nrwl/react-native : undefined
@nrwl/schematics : undefined
@nrwl/storybook : 13.8.8
@nrwl/tao : 13.8.8
@nrwl/web : 13.8.8
@nrwl/workspace : 13.8.8
typescript : 4.5.5
rxjs : 6.6.7

Community plugins:

[orcharddweller]

I have the same issue

Node : 17.6.0
OS : darwin arm64
yarn : 1.22.17

nx : 13.8.1
@nrwl/angular : undefined
@nrwl/cli : 13.8.1
@nrwl/cypress : 13.8.1
@nrwl/detox : undefined
@nrwl/devkit : 13.8.1
@nrwl/eslint-plugin-nx : 13.8.1
@nrwl/express : undefined
@nrwl/jest : 13.8.1
@nrwl/js : 13.8.1
@nrwl/linter : 13.8.1
@nrwl/nest : undefined
@nrwl/next : 13.8.5
@nrwl/node : undefined
@nrwl/nx-cloud : undefined
@nrwl/react : 13.8.1
@nrwl/react-native : undefined
@nrwl/schematics : undefined
@nrwl/storybook : 13.8.8
@nrwl/tao : 13.8.1
@nrwl/web : 13.8.1
@nrwl/workspace : 13.8.1
typescript : 4.5.5
rxjs : 6.6.7

[mandarini]

Thanks people, I am on it! :)

[Stusaw]

Thanks people, I am on it! :)

13.8.5 Works if that's of any help to anyone?

[mandarini]

Hi all! Update:

1. I will push a fix soon
2. @iamrommel thank you for this. However, I think the expected behaviour you are describing is not exactly right. I was hasty to merge @leon 's PR, since it seems to me they got it wrong. Here is what Storybook says about staticDir:

In 6.4 we've replaced the `--static-dir` CLI flag with the the `staticDirs` field in `.storybook/main.js`.

This does not mean that they RENAMED staticDir to staticDirs. This says that they are REMOVING the staticDir option from the CLI, and if anyone wants to provide a static dirs array, they should use the new staticDirs field inside .storybook/main.js. The staticDir CLI option will work until Storybook version 7, when it will not work any more.

So, the PR that leon submitted was wrong. There is NO renaming. The staticDirs option does not exist on the Storybook CLI. What we put inside project.json are the CLI parameters.

So, to correct what you defined as expected behaviour, I think this is the correct:

• When the staticDir option is not provided in project.json or through the CLI, it should work fine and use staticDirs if it's provided in .storybook/main.json
• When the staticDir option is provided in project.json or through the CLI, and the user has also provided staticDirs in .storybook/main.json, then it should throw an error (Storybook's builder throws an error)
• In any other case, it should not work.

To be frank, I'm surprised it works on 13.8.5.. If staticDirs is provided in main.js, it should not work, because there's a flaw in our executor (which I am fixing now). The PR submitted by @leon may be wrong, however it does not affect at ALL the way our executor (and Storybook's builder) works.

edit: ok I'm wrong, it did add "default": [], which is what breaks it :)

[leon]

I'm sorry I fucked this one up totally.

My problem initially was that staticDir did not accept the { from: .., to: ...} syntax.
so I wanted to add that to the schema.

Where it all went wrong was that I also tried to fix the renaming, but got it all wrong 😢

I'm happy as long as I can pass along the { from: .., to: ...} syntax via the project.json

sorry for the inconvenience.

[iamrommel]

@mandarini

So, to correct what you defined as expected behaviour, I think this is the correct:

• When the staticDir option is not provided in project.json or through the CLI, it should work fine and use staticDirs if it's provided in .storybook/main.json
• When the staticDir option is provided in project.json or through the CLI, and the user has also provided staticDirs in .storybook/main.json, then it should throw an error (Storybook's builder throws an error)
• In any other case, it should not work.

Yes is this is I want to achieved too, maybe i did not explain it well.. 😃

[mandarini]

Ha no worries @leon! Thank you very very much for contributing, don't get me wrong!!! :D :D

So, passing staticDirs from project.json is not possible because it's not supported by Storybook. staticDirs can only be used in main.js, as it says in the documentation. Let me know if you think I am missing something. It says:

In 6.4 we've replaced the --static-dir CLI flag with the the staticDirs field in .storybook/main.js

and:

[mandarini]

I'll probably (no promises here :P ) write a generator or migrator to move the content of statiDir in project.json into staticDirs in main.js

[github-actions]

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.