DEV Community: Jeancarlo Javier

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

Jeancarlo Javier — Tue, 21 Jan 2025 18:28:35 +0000

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

Uncaught (in promise) ReferenceError: exports is not defined

...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']
  }
})

For Nuxt 2:

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

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>

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! 🚀

Fixing the "vueDemi2.effectScope is not a function" Error in Nuxt 3 + Pinia (SSR, Vercel Deploy)

Jeancarlo Javier — Sat, 18 Jan 2025 02:34:25 +0000

If you’ve deployed a Nuxt 3 + Pinia app in SSR mode and encountered the following error:

vueDemi2.effectScope is not a function

you’re likely dealing with a tricky resolution or bundling issue that occurs in production builds. This problem is particularly prevalent with Node.js 22, a version commonly used by hosting platforms like Vercel.

Below, we outline the primary fix that has resolved this issue for many developers, along with additional workarounds if needed.

The Main Fix: Install Pinia Alongside @pinia/nuxt

The most reliable solution is to explicitly install Pinia as a direct dependency alongside @pinia/nuxt. This ensures that Nuxt’s SSR build references the correct version and format of Pinia’s files.

Steps to Implement:

Add Pinia to Your Dependencies Update your package.json:

   {
     "dependencies": {
       "nuxt": "^3.14.0",
       "@pinia/nuxt": "^0.7.0",
       "pinia": "^2.0.36"
     }
   }

Remove Existing Artifacts
- Delete the node_modules directory.
- Remove your lockfile (e.g., pnpm-lock.yaml, package-lock.json, or yarn.lock).
Reinstall Dependencies

Run the appropriate command for your package manager:
- pnpm install (or npm install / yarn install).
Rebuild & Redeploy

Use consistent build commands and the same package manager in your production environment.

This approach resolves mismatched references, ensuring that the correct bundle is used during SSR and eliminating the vueDemi2.effectScope is not a function error.

Additional Workarounds (If Needed)

If the main fix does not fully resolve the issue in your environment, or if you encounter other compatibility constraints, consider the following alternatives:

A) Downgrade @pinia/nuxt

Some developers have found success by locking @pinia/nuxt to an older stable version:

{
  "dependencies": {
    "nuxt": "^3.14.0",
    "@pinia/nuxt": "0.5.5"
  }
}

This avoids problematic SSR build paths introduced in newer releases. However, note that you’ll miss out on features added since version 0.5.5.

B) Use Node.js 20 Instead of Node.js 22

If you can control your Node.js environment (e.g., by specifying the version in Vercel settings or using an .nvmrc file), switching to Node.js 20 can often eliminate this SSR resolution issue.

C) Disable SSR (Last Resort)

As a final measure, you can disable SSR in your Nuxt app by setting ssr: false in nuxt.config:

export default defineNuxtConfig({
  ssr: false
});

While this bypasses the server-side build that triggers the error, it also sacrifices SEO benefits and SSR-specific features. Use this option only if no other solutions work and your app does not heavily depend on SSR.

Conclusion

In most cases, explicitly installing Pinia alongside @pinia/nuxt and recreating your lockfile resolves the vueDemi2.effectScope is not a function error in Nuxt 3 SSR. If the issue persists, consider downgrading @pinia/nuxt, switching to Node.js 20, or disabling SSR as a temporary workaround. By ensuring proper alignment of your Pinia versions, you can achieve a stable SSR experience in your Nuxt 3 project.

Nuxt + ESLint 9 + TypeScript + Prettier - Configuration Guide 2025

Jeancarlo Javier — Tue, 18 Jun 2024 22:16:26 +0000

Due to recent updates and compatibility issues, setting up a Nuxt project with the latest versions of ESLint 9, Prettier, and TypeScript can be challenging. This guide will walk you through initializing a Nuxt project and configuring ESLint and Prettier for the latest standards.

Why ESLint + Prettier?

ESLint helps find and fix problems in your JavaScript code, while Prettier ensures consistent code formatting. Using them together in the latest versions enhances code quality and developer productivity.

Initialize Nuxt Project

Start by initializing a Nuxt project with the latest Nuxt CLI:

npx nuxi@latest init nuxt-proyect-name

Required Extensions for Visual Studio Code

To ensure optimal development workflow and proper integration of ESLint and Prettier, the following extensions are required in Visual Studio Code:

ESLint: Provides JavaScript and TypeScript linting support.
- ESLint Extension
Prettier - Code Formatter: Formats your code using Prettier.
- Prettier Extension

Make sure to install these extensions to leverage the full capabilities of ESLint and Prettier in your Nuxt project.

ESLint 9 Installation and Configuration

Follow these steps to set up ESLint:

npm init @eslint/config@latest

Installation Answers

How would you like to use ESLint?

To check syntax and find problems

What type of modules does your project use?

JavaScript modules (import/export)

Which framework does your project use?

Vue.js

Does your project use TypeScript?

Yes

Where does your code run?

✅ Browser
✅ Node

Would you like to install them now?

Yes

Which package manager do you want to use?

Select your preferred option or use npm by default.

ESLint Initial Configuration

The default ESLint configuration can be customized further. Start with this base configuration:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

export default [
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  // Add your custom rules here
];

This setup utilizes the new flat configuration introduced in ESLint 9.

Prettier

Installation

Install Prettier as a development dependency:

npm install --save-dev --save-exact prettier

Configuration Files

Create a .prettierrc file to define Prettier rules:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

Create a .prettierignore file to specify files and directories to ignore:

# Ignore build output directories
.nuxt/
dist/

# Ignore node modules
node_modules/

# Ignore specific configuration files
*.config.js

# Ignore environment variables files
.env
.env.*

# Ignore lock files
yarn.lock
package-lock.json

# Ignore logs
*.log

# Ignore compiled files
*.min.js
*.min.css

# Ignore specific file types
*.png
*.jpg
*.jpeg
*.gif
*.svg

# Ignore other generated files
coverage/

Test Prettier

To test Prettier, run:

npx prettier index.js --write

Auto-format on Save

Enable auto-formatting in Visual Studio Code:

Search format on save in settings (CTRL + ,) and enable Editor: Format on Save.
Search Default Formatter in settings and select Prettier - Code Formatter.

Combining Prettier and ESLint

Install eslint-config-prettier to turn off all conflicting rules:

npm i eslint-config-prettier --save-dev

Update ESLint Configuration

Update your eslint.config.js to integrate Prettier:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  // 👇👇👇 NEW CODE 👇👇👇
  eslintConfigPrettier,
  // 👆👆👆 NEW CODE 👆👆👆
];

Ignoring Files in ESLint

Specify files and directories to ignore in ESLint:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  // 👇👇👇 NEW CODE 👇👇👇
  {
    ignores: ['node_modules', 'dist', 'public', '.nuxt']
  },
  // 👆👆👆 NEW CODE 👆👆👆
  eslintConfigPrettier,
];

By following these steps, you'll have a Nuxt project well-configured with ESLint, Prettier, and TypeScript, ensuring high code quality and consistency throughout your development process.