Solution to error encountered when using vuelidate in quasar: "ReferenceError: process is not defined"
P粉311563823
P粉311563823 2023-11-07 08:36:55
0
1
910

I am building an application using Quasar framework. For form validation I am using vuelidate for validation.

Quasar version:

» Quasar Pkg... v2.0.3

» Pkg @quasar/app... v3.0.3

verify:

"vuelidate":"^0.7.6"

"Similar" code that basically works in another Quasar 1.X application, but fails in Quasar 2.x:

Boot configuration:

import Vuelidate from 'vuelidate';

export default ({ app }) => {
  app.use(Vuelidate);
};

Components:

<template>
  <div>
    <q-input
      filled
      label="Tweets"
      type="text"
      v-model="$v.tweets.$model"
      :error="$v.tweets.$error"
      @blur="$v.tweets.$touch"
    />
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { required, numeric } from "vuelidate/lib/validators";

export default defineComponent({
  name: "StatsForm",
  data() {
    return {
      tweets: null,
    };
  },
  validations: {
    tweets: { required, numeric },
  },
});
</script>

Code for using components:

<template>
  <q-page class="flex justify-center q-ma-md">
    <div class="column">
      <h1>Twitter Profile Performance Report</h1>
      <stats-form />
    </div>
  </q-page>
</template>

<script>
import { defineComponent } from "vue";
import StatsForm from "../components/StatsForm.vue";

export default defineComponent({
  name: "PerformanceReport",
  components: {
    "stats-form": StatsForm,
  },
});
</script>

<style>
h1 {
  font-size: 2.5em;
  font-weight: 400;
  line-height: 1em;
}
</style>

I get the following error in my browser:

vue-router.esm-bundler.js?f6c4:3248 ReferenceError: process is not defined
    at eval (withParams.js?8b99:7)
    at Object../node_modules/vuelidate/lib/withParams.js (vendor.f2dee45ef25904390a82.hot-update.js:271)
    at __webpack_require__ (app.js:195)
    at fn (app.js:460)
    at eval (common.js?bca9:14)
    at Object../node_modules/vuelidate/lib/validators/common.js (vendor.f2dee45ef25904390a82.hot-update.js:62)
    at __webpack_require__ (app.js:195)
    at fn (app.js:460)
    at eval (alpha.js?d360:8)
    at Object../node_modules/vuelidate/lib/validators/alpha.js (vendor.f2dee45ef25904390a82.hot-update.js:18)


P粉311563823
P粉311563823

reply all(1)
P粉714890053

Vuelidate v0.7.6 is the version released on October 23, 2020, and is only compatible with Vue 2. You are using Vue 3, which means you mustuse Vuelidate v2

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template