Vee-validate: Bugs: $attrs is readonly and ValidationObserve always return true

Created on 18 Oct 2019 · 4Comments · Source: logaretm/vee-validate

Versions

vee-validate: 3.0.11
vue: 2.6.10

Describe the bug

ValidationObserve never works. You always get true for:

const isValid = await this.$refs.observer.validate()

And then you get lots of warnings from Vue:

Vue warn]: $attrs is readonly.

found in

---> <ValidationObserver>
       <VeeValidation> at src/components/vee-validation.vue
         <App> at src/app.vue
           <Root>

The changes from version 2 to 3 are too extreme without any transition. It is like a completely different program from scratch and there is no upgrade guide whatsoever.

Using CDN is even worst, you just don't know it works at all and you get this error:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Basically, nothing works. Why was it released?

Expected behavior
Should be false if the form is invalid

Desktop (please complete the following information):

OS: Linux
Browser chrome

Code for reproduction

<!DOCTYPE html>
<html>
<head>
  <title>Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
</head>
<body>

  <div id="app">
    <ValidationProvider rules="secret" v-slot="{ errors }">
      <input v-model="email" type="text">
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </div>

  <script>
  // Add a rule.
  VeeValidate.extend('secret', {
    validate: value => value === 'example',
    message: 'This is not the magic word'
  })

  // Register the component globally.
  Vue.component('ValidationProvider', VeeValidate.ValidationProvider);

  new Vue({
    el: '#app',
    data: {
      email: null
    }
  })
</script>

</body>
</html>

🤔 needs reproduction

Source

lautiamkok

All 4 comments

Create a sample for it and I will take a look, you can use codesandbox or jsfiddle.

logaretm on 18 Oct 2019

It only works with Vue Cli. If you have your custom build process with webpack, then you get all the errors.

It should be tested without Vue Cli before releasing really.

This is my package.json

{
  "name": "vue-component-sfc",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "watch": "webpack --watch",
    "build": "webpack --config webpack.prod.js"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "axios": "^0.18.1",
    "core-js": "^3.3.2",
    "jquery": "^3.4.1",
    "qs": "^6.9.0",
    "vee-validate": "^3.0.11",
    "vue": "^2.6.10",
    "vue-meta": "^1.6.0",
    "vue-router": "^3.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "nodemon": "^1.19.4",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-loader": "^15.7.1",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2",
    "webpack-manifest-plugin": "^2.2.0",
    "webpack-merge": "^4.2.2"
  }
}

lautiamkok on 18 Oct 2019

Vue-cli properly aliases the vue namespace, your problem is caused by using two different versions of vue in the same app. So you should alias vue to whichever bundle you are using.

I'm closing this since you can find the solution for aliasing the vue bundle anywhere. Also because I need to see the issue before I can take guesses at it.

logaretm on 18 Oct 2019

👎3

Sorry, I've been banging my head against this for an hour and the solution isn't obvious to me. Can you provide an extra nudge as to what Webpack changes I need to make to upgrade to 3.x?