Custom validations working perferctly in react app but story book giving error 'Uxpected token'

Question

The validations are passed to element in validationRules prop like as follow

<Input
    placeholder="Phone Number"
    validationRules={[ required ]}
    onChange={this.updateSearchParams.bind(this, 'phoneNumber')}
/>

The validation rule is basically a function and the validationRules are an array of functions. The require rule is like as follows

export const required = (value: string) => {
  if (!value.toString().trim().length) {
    return false
  }

  return true
};

The react app is working perfectly fine but when I am running a storybook the file gives an error like

Uncaught SyntaxError: Invalid or unexpected token

The storybook run fine without that validationRules prop

The current webpack.config.js of the storybook is

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: [SRC_PATH],
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      },
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          configFileName: './.storybook/tsconfig.json'
        }
      },
      // Optional
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ],
  });
  config.plugins.push(new TSDocgenPlugin());
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

Do I need an extra configuration here?

Answer 1

The TSDocgen Plugin has some issues if we pass an array of functions as a value to a prop. So, for now, I removed the plugin,

const path = require('path');
const SRC_PATH = path.join(__dirname, '../src');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: [SRC_PATH],
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      },
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          configFileName: './.storybook/tsconfig.json'
        }
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

Welcome if someone finds a solution which will allow using doc plugin also.