search

storybookjs / storybook

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

Missing styles #4248

Closed mmintel closed 5 years ago

mmintel commented 6 years ago

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

Screenshots / Screencast / Code Snippets (Optional)

screenshot 2018-09-28 at 10 11 29

psimyn commented 6 years ago

@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 commented 6 years ago

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/components-core@1.0.7
│  └─ @storybook/addons@3.4.11
├─ @storybook/addon-actions@4.0.0-alpha.23
│  ├─ @storybook/addons@4.0.0-alpha.23
│  ├─ @storybook/channels@4.0.0-alpha.23
│  ├─ @storybook/components@4.0.0-alpha.23
│  └─ @storybook/core-events@4.0.0-alpha.23
├─ @storybook/addon-info@4.0.0-alpha.22
├─ @storybook/addons@4.0.0-alpha.22
├─ @storybook/channel-postmessage@4.0.0-alpha.22
├─ @storybook/channels@4.0.0-alpha.22
├─ @storybook/client-logger@4.0.0-alpha.22
├─ @storybook/components@4.0.0-alpha.22
├─ @storybook/core-events@4.0.0-alpha.22
├─ @storybook/core@4.0.0-alpha.22
├─ @storybook/mantra-core@1.7.2
├─ @storybook/node-logger@4.0.0-alpha.22
├─ @storybook/podda@1.2.3
├─ @storybook/react-komposer@2.0.4
├─ @storybook/react-simple-di@1.3.0
├─ @storybook/react-stubber@1.0.1
├─ @storybook/react@4.0.0-alpha.22
└─ @storybook/ui@4.0.0-alpha.22

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

Keraito commented 6 years ago

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

igor-dv commented 6 years ago

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

amoshydra commented 5 years ago

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 commented 5 years ago

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, <Amos Wong (mailto:notifications@github.com)> wrote:

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 commented 5 years ago

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

igor-dv commented 5 years ago

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

mmintel commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Installed 5x and run into this problem.

miketdonahue commented 5 years ago

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.