Sorry, but you either have no stories or none are selected somehow.

Hey! How it’s going? Chromatic is not showing the stories content. I’ve tested in Brave and Mozilla. My local storybook build is working as expected.

Test.stories.tsx:

import { Meta } from '@storybook/react'

export const Test = () => <p>hello!</p>

export default {
  title: 'Components/Test'
} as Meta

main.js:

import React from "react";
import { ThemeProvider } from "styled-components";
import { addDecorator } from "@storybook/react";
import { GlobalStyle } from "../src/globalStyles";
import { defaultTheme } from "../src/theme/default";
import { withThemesProvider } from "storybook-addon-styled-component-theme";

const themes = [defaultTheme];

addDecorator(withThemesProvider(themes), ThemeProvider);

export const decorators = [
  (Story) => (
    <>
      <GlobalStyle />
      <Story />
    </>
  ),
];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
};

preview.js:

import React from "react";
import { ThemeProvider } from "styled-components";
import { addDecorator } from "@storybook/react";
import { GlobalStyle } from "../src/globalStyles";
import { defaultTheme } from "../src/theme/default";
import { withThemesProvider } from "storybook-addon-styled-component-theme";

const themes = [defaultTheme];

addDecorator(withThemesProvider(themes), ThemeProvider);

export const decorators = [
  (Story) => (
    <>
      <GlobalStyle />
      <Story />
    </>
  ),
];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
};

[josectobar]

John from Chromatic pointed out the issue was coming from storybook-addon-styled-component-theme since it takes control over the rendering at runtime and it seems to only work in the Storybook UI’s context and not Chromatic’s. I was able to fix the issue by using https://github.com/semoal/themeprovider-storybook instead. 🎉

[HosseinAgha]

I’m facing the same issue with chromatic@5.8.0, @storybook/react@6.1.21, and npm@6.14.12.

Also looks like chromatic sends output options to build-storybook script in the wrong format (at least for npm 6 and before we should add a -- for sending script specific params).

I had to provide a custom output option to both storybook and chromatic script in order for this to work. But I still see empty snapshots and canvas in the chromatic app. Although clicking on the view storybook button in the Library shows that stories are fine.