Search code examples
javascriptreactjsreact-reduxantdant-design-pro

Facing ant-design form validation issue on production


Basically, I am facing ant-design form issue on my production environment recently, previously it was working as expected. Validation only works when I run NPM start command on my local. If I use NPM Build: serve then facing the same issue on my local as well.
Showing this error on the console when I perform validation task.

Uncaught TypeError: Cannot read property 'push' of undefined at createBaseForm.js:369

I tried to update all my NPM Packages along with mn NPM and node version as well, after facing this issue.

<FormItem>
   {getFieldDecorator('userName', {
      rules: [{ required: true, message: 'Please input username!' }],
      })(<Input addonBefore={<i className="iconfont icon-user" />} 
         size="large" placeholder="Username" /> 
   )}
</FormItem>

It's not showing me an error message which is used in rules.


Solution

  • In my case, the error was caused by lodash.memoize and lodash.paths not loading in webpack build, as I was using lodash-webpack-plugin to reduce the bundle size.

    Lodash features removed by default: link

    Solution was to opt in to required features.

    new LodashModuleReplacementPlugin({
        'memoizing': true,
        'paths': true
    });
    

    Edit: antd is using rc-form which in turn uses lodash to set errors.