Storybook: Missing styles

[mmintel]

Bug or support request summary

There seem to be styles missing in the storybook, some styles are loaded, others are not, also fonts missing. No error message.

Steps to reproduce

I don't know how to reproduce, I tried disabling all storybook addons, i disabled every story, disabled my custom webpack config (also restarted node afterwards)

Please specify which version of Storybook and optionally any affected addons that you're running

"@storybook/addon-actions": "^4.0.0-alpha.23",
"@storybook/addon-knobs": "^4.0.0-alpha.23",
"@storybook/addon-links": "^4.0.0-alpha.23",
"@storybook/addon-notes": "^4.0.0-alpha.23",
"@storybook/vue": "^4.0.0-alpha.23",

Affected platforms

• Chrome 71
• MacOS 10.14

Screenshots / Screencast / Code Snippets (Optional)

[psimyn]

@mmintel can you try loading in a different browser (or in Incognito). Could be an extension conflicting

Are there any missing files in Chrome Network tab (404 etc)?

How did you install Storybook?

[joefiorini]

I can confirm I have the same issue. All the CSS classes that specify fonts say inherit and there doesn't seem to be anything specifying a font to use, so it's defaulting to Times. Here's my tree of storybook dependencies:

├─ @lcars/[email protected]
│  └─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  └─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
└─ @storybook/[email protected]

I checked this in incognito in Chrome 60 & Safari, same result in both.

[Keraito]

Seems like the issues from #4211 are still there, @igor-dv

[igor-dv]

That is strange.. Doesn't happen to me.. Can anyone reproduce on a clean env?

[amoshydra]

Here is what I found from my environment Windows:

| Package manager | Version | Style |
| :-- | :-- | :--
| npm | 4.0.0-alpha.20 | ✔
| yarn | 4.0.0-alpha.20 | ❌
| yarn | 4.0.0-alpha.23 | ✔

[joefiorini]

It turns out I had a 3.x version of @storybook/addons sneak in. I updated that to the latest alpha and everything is working again.

On Oct 8, 2018 at 4:36 AM,

Here is what I found from my environment Windows:

Package manager

Version

Style

npm

4.0.0-alpha.20

✔

yarn

4.0.0-alpha.20

❌

yarn

4.0.0-alpha.23

✔

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub (https://github.com/storybooks/storybook/issues/4248#issuecomment-427757894), or mute the thread (https://github.com/notifications/unsubscribe-auth/AAAOQFry7K46JAxONDDn7EPY_aAIeBPVks5uiw6hgaJpZM4W-DwB).

[gabrielcsapo]

@mmintel could you verify this is no longer a bug?

[igor-dv]

IMO the latest alpha is ok. Please reopen with the reproduction.

[mmintel]

I installed storybook via the vue cli with "vue-cli-plugin-storybook": "^0.4.8", and I think this is the problem. A look at my package-lock.json shows this requires the alpha-20.

    "vue-cli-plugin-storybook": {
      "version": "0.4.8",
      "resolved": "https://registry.npmjs.org/vue-cli-plugin-storybook/-/vue-cli-plugin-storybook-0.4.8.tgz",
      "integrity": "sha512-3uLZ+1jrympzd7OypZVHTeVaF8gqEY4K9qYpEd8uyzdMZasU794NT8yTqyzNTK/iHDSsWYmicd6HA/UGDHyQFw==",
      "dev": true,
      "requires": {
        "@storybook/addons": "4.0.0-alpha.20",
        "@storybook/vue": "4.0.0-alpha.20"
      },

There is already an open PR on their side work with alpha-21: https://github.com/storybooks/vue-cli-plugin-storybook/pull/31 even though this is already outdated, they seem to be working on it.

I also tried to just fork it and bump versions but then I am getting another error Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: programPath.hub.addHelper is not a function at wrapInterop. So that's probably not enough.

If someone wants to try: https://github.com/mmintel/vue-cli-plugin-storybook.

[amoshydra]

Hi @mmintel

I was using vue-cli-pugin-storybook, v0.4.8 like you were when i posted this comment 2 days ago

However, this styling issue is gone yesterday on my existing project. It happen after I explicitly install @babel/core dependency as part of the process of adding @vue/cli-plugin-unit-jest.

I am no longer able to reproduce this problem on a fresh creation of vuecli project that uses 4.0.0-alpha.20. See: https://github.com/amoshydra/repro-storybook-storybook-4248

Suggestion:

Perhaps someone updated their dependencies somewhere. You can try

1. removing yarn.lock and node_modules
2. Reinstalling your dependencies again yarn

Side note:

I have recently found out that, you can selectively override a dependency's dependency in the package.json if you are using yarn. https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

package.json

{
  "resolution": {
    "vue-cli-plugin-storybook/@storybook/addons": "4.0.0-alpha.24",
    "vue-cli-plugin-storybook/@storybook/vue": "4.0.0-alpha.24"
  }
}

However, ☝️ this still won't work due to programPath.hub.addHelper is not a function

[vjpr]

Installed 5x and run into this problem.

[meebix]

I am having intermittent issues on v4.1.6 across the board.

"@storybook/addon-actions": "4.1.6",
"@storybook/addon-knobs": "4.1.6",
"@storybook/addon-options": "4.1.6",
"@storybook/addon-viewport": "4.1.6",
"@storybook/react": "4.1.6",

Something strange going on with a race condition or similar with styling in the main Storybook UI. This should be reopened. It is definitely not fixed. I am _not_ using CRA and still have the problem.

You can repro with https://github.com/doc-kits/react.

Update: Upgrading to the latest v5.0.6 appears to have solved this problem.