自定义验证在 React 应用程序中完美运行，但故事书给出错误 'Uxpected token'

Question

验证传递给 validationRules 属性中的元素，如下所示

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

验证规则基本上是一个函数，而 validationRules 是一个函数数组。 require 规则如下

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

  return true
};

React 应用程序运行得非常好，但是当我运行编写故事书时，文件会出现类似

的错误

Uncaught SyntaxError: Invalid or unexpected token

故事书运行没有 validationRules 道具就可以了

故事书的当前webpack.config.js是

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;
};

这里需要额外配置吗？

Answer 1

如果我们将函数数组作为值传递给 prop，TSDocgen 插件会出现一些问题。所以，现在，我删除了插件，

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;
};

如果有人找到了也允许使用 doc 插件的解决方案，欢迎使用。

自定义验证在 React 应用程序中完美运行，但故事书给出错误 'Uxpected token'

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

javascript

typescript

reactjs

webpack

storybook