DEV Community

Jeancarlo Javier
Jeancarlo Javier

Posted on

Solving `Uncaught (in promise) ReferenceError: exports is not defined` in Nuxt.js with Vee-Validate

If you're working on a Nuxt.js project and encounter the error:

Uncaught (in promise) ReferenceError: exports is not defined
Enter fullscreen mode Exit fullscreen mode

...when using vee-validate, you're not alone! This issue commonly occurs due to improper transpilation of the vee-validate library, which uses modern ES modules. Here's how to fix it and ensure everything works smoothly.


Why This Happens

The error occurs because Nuxt.js (especially when running in SSR mode) sometimes needs explicit instructions to transpile modern libraries like vee-validate. Without this, the library may try to use exports, a CommonJS feature, in an ES module environment, resulting in the error.


The Solution

1. Ensure Compatible Versions

Before jumping to configurations, confirm you're using the right versions for your Nuxt and Vue setup:

  • Nuxt 3 + Vue 3: Use vee-validate v4.
  • Nuxt 2 + Vue 2: Use vee-validate v3, unless you're using the Vue Composition API plugin, which can work with v4.

2. Transpile Vee-Validate

Add vee-validate to the transpile option in your nuxt.config.

For Nuxt 3:

// nuxt.config.ts
export default defineNuxtConfig({
  build: {
    transpile: ['vee-validate']
  }
})
Enter fullscreen mode Exit fullscreen mode

For Nuxt 2:

// nuxt.config.js
export default {
  build: {
    transpile: ['vee-validate']
  }
}
Enter fullscreen mode Exit fullscreen mode

This ensures that Nuxt will properly transform vee-validate for both client and server environments.


3. Example Form Setup with Vee-Validate

Here’s a quick example of using vee-validate with yup for schema validation in Nuxt 3:

<script setup lang="ts">
import { useForm, useField } from 'vee-validate'
import * as yup from 'yup'

// Define the validation schema
const formSchema = yup.object({
  email: yup.string().required('Email is required').email('Invalid email'),
  password: yup.string().required('Password is required').min(6, 'Password must be at least 6 characters')
})

// Initialize the form with the schema
const { handleSubmit, errors } = useForm({
  validationSchema: formSchema
})

// Define form fields
const { value: email, errorMessage: emailError } = useField('email')
const { value: password, errorMessage: passwordError } = useField('password')

// Handle form submission
const onSubmit = handleSubmit((values) => {
  console.log('Form values:', values)
})
</script>

<template>
  <form @submit.prevent="onSubmit">
    <div>
      <label for="email">Email</label>
      <input id="email" v-model="email" type="text" />
      <p v-if="emailError">{{ emailError }}</p>
    </div>

    <div>
      <label for="password">Password</label>
      <input id="password" v-model="password" type="password" />
      <p v-if="passwordError">{{ passwordError }}</p>
    </div>

    <button type="submit">Submit</button>
  </form>
</template>
Enter fullscreen mode Exit fullscreen mode

4. Check Your Node Version

Ensure you're running Node.js 14 or later, as older versions might not handle modern ES module syntax well.


Final Thoughts

By adding vee-validate to the transpile configuration, you can avoid the frustrating exports is not defined error and fully leverage the power of vee-validate in your Nuxt.js project. If you're still experiencing issues, double-check your package versions and project setup.

Happy coding! πŸš€


Related Links

Got questions? Leave a comment or share your experience!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay