storybook: Global addDecorator is ignored

Describe the bug In my React/TypeScript app if I add a global addDecorator in my preview.tsx this is ignored. The exact same decorator works if I add it to a single story.

What could it be?

Expected behavior I expect the decorator to work in preview.tsx

Code snippets

main.js:

const webpack = require("webpack");

// react-scripts-ts's webpack.config.js
const custom = require("react-scripts-ts/config/webpack.config.dev.js");

module.exports = {
  stories: ["../src/**/*.stories.(ts|tsx)"],
  addons: [
    "@storybook/addon-viewport",
    "@storybook/addon-storysource",
    "@storybook/addon-actions",
    "@storybook/addon-links",
  ],
  webpackFinal: (config) => {
    // "Finally, if your custom webpack config uses a loader that does not
    // explicitly include specific file extensions via the test property,
    // it is necessary to exclude the .ejs file extension from that loader."
    // https://storybook.js.org/docs/configurations/custom-webpack-config/#examples
    const oneOf = custom.module.rules[1].oneOf;
    oneOf[oneOf.length - 1].exclude.push(/\.ejs$/);

    const outConfig = {
      ...config,
      module: {
        ...config.module,
        rules: custom.module.rules,
      },
      plugins: [
        ...config.plugins,
        // See https://stackoverflow.com/a/51194917/416714 and
        // https://webpack.js.org/migrate/3/#loaderoptionsplugin-context
        new webpack.LoaderOptionsPlugin({
          options: {
            context: process.cwd(), // or the same value as `context`
          },
        }),
      ],
    };

    // Make sure we can import .ts/.tsx files in our stories
    outConfig.resolve.extensions.push('.ts', '.tsx');

    // Make sure storysource picks up .tsx source files
    outConfig.module.rules.push({
      test: /\.stories\.tsx?$/,
      loaders: [
        {
          loader: require.resolve('@storybook/source-loader'),
          options: { parser: 'typescript' },
        },
      ],
      enforce: 'pre',
    })

    return outConfig;
  },
};

preview.tsx:

import React from 'react';
import { addDecorator } from '@storybook/react';

// Doesn't do anything here
addDecorator((story) => <div style={{ background: 'pink' }}>{story()}</div>);

button.stories.tsx:

import React from 'react';
import { action } from '@storybook/addon-actions';
import Button from './button';

export default {
  title: 'UI Library/Controls/Buttons/Button',
  // The background actually turns pink here
  decorators: [(story) => <div style={{ background: 'pink' }}>{story()}</div>],
};

export const normal = () => (
  <Button onClick={action('clicked')}>Log In</Button>
);

System:

Environment Info:

  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
  Browsers:
    Chrome: 81.0.4044.129
    Edge: 81.0.416.68
    Firefox: 76.0
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: ^5.3.18 => 5.3.18 
    @storybook/addon-links: ^5.3.18 => 5.3.18 
    @storybook/addon-storysource: ^5.3.18 => 5.3.18 
    @storybook/addon-viewport: ^5.3.18 => 5.3.18 
    @storybook/addons: ^5.3.18 => 5.3.18 
    @storybook/react: ^5.3.18 => 5.3.18 

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 22 (10 by maintainers)

Most upvoted comments

I had an issue with a context provider, which others might have as well. I see lots of this in Storybook examples:

story => <Provider>{story()}</Provider>

So that the Provider can provide its context, I had to replace it with:

Story => <Provider><Story /></Provider>

And itโ€™s obvious why I had to do it, but I feel dumb because of how much it took for me to realize it.

@shilman I actually found a work-around (maybe not even a work-around, but a proper solution). In the previous version, we had the following code in preview.jsx:

configure(
  require.context("client/dist", true, /\.stories\.js$/),
  module
);

And this code caused the above effect of ignoring decorators in 95% of case. Once I removed it and instead added stories: ["../../client/dist/**/*.stories.js"] to main.ts, it started working as expected. (Here client is the second yarn workspaces monorepo project in packages/.)

@y-nk Thanks Iโ€™ll take a look and let you know ๐Ÿ™

@mrmckeb thank you for looking into this.

The problem is not so much with react-scripts-ts (which Iโ€™d be happy to move away from if it was under my control ๐Ÿ˜…), but with the fact that it appears that a file named preview.tsx is ignored, while if it is named preview.jsx it is not.

Would it be possible to add the tsx extension?