Forem

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!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay