Element: [Bug Report] "TypeError: _asyncValidator2.default is not a constructor" on Form Validation

Created on 25 Jan 2018  ·  7Comments  ·  Source: ElemeFE/element

Element UI version

2.0.11

OS/Browsers version

Ubuntu 17.10 / Firefox 57

Vue version

2.0.1

Reproduction Link

https://jsfiddle.net/mmx38qxw/

Steps to reproduce

I am truly sorry but I can't reproduce this on fiddle. I used a full copy of your samples in my instalation and it doesn't work. I would love to hear at least a tip or help on what is the meaning of the error.

In my Template I have:

<el-form ref="form" :model="form" :rules="rules" label-width="120px">
    <el-form-item label="Tíitle" prop="title">
        <el-input v-model="form.title"></el-input>
    </el-form-item>
</el-from>

in my data, I have:

data(){
        return {
            form: {
                title: ''
            },
            rules: {
                title: [  { required: true, message: 'Please provide a title.', trigger: 'blur' }   ]
            }
       }
}

Enter the Title text field and then leave it, activating blur.

What is Expected?

Validation warning should appear on field, explaining that title should not be empty.

What is actually happening?

Console errors is displayed:

[Vue warn]: Error in event handler for "el.form.blur": "TypeError: _asyncValidator2.default is not a constructor"

found in

---> <ElFormItem>
       <ElForm>
         <ItemCreationPage>
           <ElMain>
             <ElContainer>... (1 recursive calls)
               <AdminPage>
                 <Root>
form repro

Most helpful comment

I had the same problem, update the packages can not solve it. my solution was to add a alias setting, like this:
'async-validator': 'async-validator/lib/index.js'

Sorry for my English(I'm Chinese)

All 7 comments

Your code looks good to me. If you're using Vue 2.0.1, please upgrade it to 2.5.2 or up. Otherwise, you can minify your project and put it on GitHub so we can reproduce it.

Hi @Leopoldthecoder, thanks for the quick answer.
I tried upgrading to both Vue 2.5.2 and 2.5.13 and it didn't worked, same error. We tried to make an executable version of our project and it's a long road, as we have a Wordpress enviroment, PHP, APIs and other stuff involved. Our source code on early stages, hosted on github and I can point you to the file, but I don't think it would be easy for you to reproduce.

We decided to try to move on with our own method for validation (or maybe search for another library like Vuelidade). We still rely fully on ElementUI tough, and hope the project to keep growing, it's been really useful!

If by looking at the code you can still provide us any tip related to the error I would love to hear it. Otherwise feel free to close the issue.

@mateuswetah and me, we are in the same project, we were using some beta versions of packages, like Webpack and Babel Loader, for that we had problems. The solution for that problems, was update Webpack and all its dependencies to latest versions. In addition, We had to update Vue, Vue Loader and its dependencies to latest versions.

Thank you @Leopoldthecoder for you attention.

Sorry by my English (I'm Brazilian).

We're done here, thanks!

I had the same problem, update the packages can not solve it. my solution was to add a alias setting, like this:
'async-validator': 'async-validator/lib/index.js'

Sorry for my English(I'm Chinese)

@whoiam2007s thanks it works for me

@whoiam2007s thanks it works for me too

Was this page helpful?
0 / 5 - 0 ratings

Related issues

FranzSkuffka picture FranzSkuffka  ·  3Comments

chao-hua picture chao-hua  ·  3Comments

yorululu picture yorululu  ·  3Comments

akaylh picture akaylh  ·  3Comments

Zhao-github picture Zhao-github  ·  3Comments