Storybook: [StoryShots] unexpected identifier global in storyshots after upgrade.

Created on 21 Nov 2019 · 3Comments · Source: storybookjs/storybook

After upgrading my storybook to 5.3.beta.3 and configuring docgen with typescript. My storyshots have stopped working. throwing this error every time i run them.

I have seen that this is not a new issue, however, I was not able to find any previous solutions to this problem.

My webpack config:

const path = require("path");
const styleguideContext = path.dirname(require.resolve('@logz-ui/styleguide'));
const { jsRule, tsRule, storyRule, cssRule  } = require('@logz-build/webpack');
const { browserProdConfig } = require('@logz-build/babel-config');

const ignoredProps = ['as', 'css', 'theme', 'ref'];

const storybookDocGenRule = () => ({
  test: /\.(tsx|ts)?$/,
  use: [
    {
      loader: require.resolve('react-docgen-typescript-loader'),
      options: {
        propFilter: prop => {
          if (ignoredProps.includes(prop.name)) {
            return false;
          }

          if (prop.parent) {
            return (
              !prop.parent.fileName.includes('node_modules/@types/react/') &&
              !prop.parent.fileName.includes('@types/styled-system')
            );
          }

          return true;
        },
      },
    },
  ],
  exclude: /node_modules/,
});

module.exports = ({ config }) => {
  config.context = (path.join(__dirname, '../'));

  config.module.rules =[
    tsRule({configFileName: path.join(__dirname, '../tsconfig.json'),
    include: [path.join(__dirname, '../stories')]}),
    storybookDocGenRule(),
    jsRule(browserProdConfig),
    storyRule,
    cssRule,
    config.module.rules[1]];

  config.resolve.extensions.push(".ts", ".tsx");

  config.resolve.alias = {
    '@logz-ui/styleguide': path.resolve(styleguideContext)
  };
  return config;
};

My storybook config

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';
import { withKnobs } from '@storybook/addon-knobs';
import { bootstrap } from '@logz-ui/styleguide';
import {StoryContainer} from "../stories/storyComponents/StoryContainer";

bootstrap();

const storyBookDecorators = [
  withKnobs,
  withOptions({
    name: `@logz-ui/styleguide`,
    url: 'https://github.com/logzio/gaia-hermes-ws/tree/master/styleguide',
    hierarchyRootSeparator: /\|/,
  }),
];

addDecorator(Story =>
  <StoryContainer>
    <Story />
  </StoryContainer>
);

storyBookDecorators.forEach(addon => addDecorator(addon));

configure(require.context('../stories', true, /\.story\.(jsx|ts|js|tsx)?$/), module);

My Presets:

const path = require("path");

module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
      babelOptions: {
        babelrc: path ,
        presets: [],
        plugins: ['emotion'],
      },
      sourceLoaderOptions: null,
    },
  },
  {
    name: "@storybook/preset-typescript",
    options: {
      tsDocgenLoaderOptions: {
        tsconfigPath: path.resolve(__dirname, "../tsconfig.json")
      },
      include: [path.resolve(__dirname, "../stories")]
    }
  }
];

Would love to know how i can avoid this since it is blocking our upgrade to the new docgen feature.

storyshots bug question / support

Source