storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.73k stars 9.32k forks source link

[Bug]: Build Storybook fails in monerepo #24633

Open floratmin opened 1 year ago

floratmin commented 1 year ago

Describe the bug

 I have set up a monorepo with nx workspace. The sveltekit app is located in a subdirectory. When building storybook with nx build-storybook toolapp the build fails with NX src/app.html does not exist. When I create a folder src in the workspace root folder and copy the file app.html into this folder the build works.

I can use storybook with nx storybook toolapp without problems.

To Reproduce

storybook-sveltekit-nx-workspace

to make it work rename src-throws to src

System

No response

Additional context

No response

shilman commented 10 months ago

@JReinhold any quick thoughts on this?

JReinhold commented 10 months ago

I think this might be an nx issue, but I'm no expert on the matter, @mandarini do you know? It looks like we need CWD to be apps/toolapp bit it's just the root, which is causing the SvelteKit part of the build to fail.

When I dig into the generated .nx/cache/project-graph.json I see this:

{
  "nodes": {
    "toolapp": {
      ...
      "data": {
        ...
        "root": "apps/toolapp",
        "targets": {
          "build": { 👈 building the SvelteKit app with "pnpm nx build toolapp" works!
            "executor": "nx:run-commands",
            "defaultConfiguration": "production",
            "options": {
              "command": "vite build",
              "cwd": "apps/toolapp"  👈 
            },
            "configurations": {
              ...
              "production": {
                "options": {
                  "command": "vite build",
                  "cwd": "apps/toolapp"
                }
              }
            }
          },
          "build-storybook": {
            ...
            "executor": "@nx/storybook:build",
            "options": { 👈 cwd option is missing!
              "outputDir": "dist/storybook/toolapp",
              "configDir": "apps/toolapp/.storybook"
            },
            "configurations": {
              "ci": {
                "quiet": true
              }
            }
          },

Naively nx could change the default configuration to cwd into the directory similar to the SvelteKit, but that could likely cause other issues for other nx+Storybook users. So maybe there's something to configure in nx here. I tried adding this to the nx.json but it didn't make a difference:

        "build-storybook": {
            "inputs": [
                "default",
                "^production",
                "{projectRoot}/.storybook/**/*",
                "{projectRoot}/tsconfig.storybook.json"
            ],
            "cache": true,
            "options": {
                "cwd": "{projectRoot}" 👈
            }
        }
mandarini commented 10 months ago

I can take a look tomorrow!