fix: force loading the mjs module when using nuxt

Author: logaretm

.changeset/wise-suits-divide.md

@@ -0,0 +1,10 @@
+---
+"vee-validate": patch
+"@vee-validate/valibot": patch
+"@vee-validate/nuxt": patch
+"@vee-validate/joi": patch
+"@vee-validate/yup": patch
+"@vee-validate/zod": patch
+---
+
+fix: force loading the mjs module when using nuxt

packages/joi/package.json

@@ -14,7 +14,8 @@
       "types": "./dist/vee-validate-joi.d.ts",
       "import": "./dist/vee-validate-joi.mjs",
       "require": "./dist/vee-validate-joi.cjs"
-    }
+    },
+    "./dist/*": "./dist/*"
   },
   "homepage": "https://vee-validate.logaretm.com/v4/integrations/joi-schema-validation/",
   "repository": {

packages/nuxt/src/module.ts

@@ -1,5 +1,5 @@
-import { defineNuxtModule, addComponent, addImports, logger } from '@nuxt/kit';
-import type { NuxtModule } from '@nuxt/schema';
+import { defineNuxtModule, addComponent, addImports, logger, resolveModule } from '@nuxt/kit';
+import type { Nuxt, NuxtModule } from '@nuxt/schema';
 import { isPackageExists } from 'local-pkg';
 
 type ComponentName = 'Field' | 'Form' | 'ErrorMessage' | 'FieldArray';
@@ -51,7 +51,7 @@ export default defineNuxtModule<VeeValidateNuxtOptions>({
     autoImports: true,
     componentNames: {},
   },
-  setup(options) {
+  setup(options, nuxt) {
     if (options.autoImports) {
       composables.forEach(composable => {
         addImports({
@@ -75,25 +75,27 @@ export default defineNuxtModule<VeeValidateNuxtOptions>({
     }
 
     if (options.typedSchemaPackage === 'yup') {
-      checkForYup(options);
+      checkForYup(options, nuxt);
       return;
     }
 
     if (options.typedSchemaPackage === 'zod') {
-      checkForZod(options);
+      checkForZod(options, nuxt);
       return;
     }
 
     if (options.typedSchemaPackage === 'valibot') {
-      checkForValibot(options);
+      checkForValibot(options, nuxt);
       return;
     }
 
-    if (!checkForYup(options)) {
-      if (!checkForZod(options)) {
-        checkForValibot(options);
+    if (!checkForYup(options, nuxt)) {
+      if (!checkForZod(options, nuxt)) {
+        checkForValibot(options, nuxt);
       }
     }
+
+    addMjsAlias('vee-validate', 'vee-validate', nuxt);
   },
 }) as NuxtModule<VeeValidateNuxtOptions>;
 
@@ -113,7 +115,7 @@ function checkSchemaResolverDependencies(pkgName: (typeof schemaProviders)[numbe
   }
 }
 
-function checkForValibot(options: VeeValidateNuxtOptions) {
+function checkForValibot(options: VeeValidateNuxtOptions, nuxt: Nuxt) {
   checkSchemaResolverDependencies('valibot');
   if (isPackageExists('@vee-validate/valibot') && isPackageExists('valibot')) {
     logger.info('Using valibot with vee-validate');
@@ -125,13 +127,15 @@ function checkForValibot(options: VeeValidateNuxtOptions) {
       });
     }
 
+    addMjsAlias('@vee-validate/valibot', 'vee-validate-valibot', nuxt);
+
     return true;
   }
 
   return false;
 }
 
-function checkForZod(options: VeeValidateNuxtOptions) {
+function checkForZod(options: VeeValidateNuxtOptions, nuxt: Nuxt) {
   checkSchemaResolverDependencies('zod');
   if (isPackageExists('@vee-validate/zod') && isPackageExists('zod')) {
     logger.info('Using zod with vee-validate');
@@ -143,13 +147,15 @@ function checkForZod(options: VeeValidateNuxtOptions) {
       });
     }
 
+    addMjsAlias('@vee-validate/zod', 'vee-validate-zod', nuxt);
+
     return true;
   }
 
   return false;
 }
 
-function checkForYup(options: VeeValidateNuxtOptions) {
+function checkForYup(options: VeeValidateNuxtOptions, nuxt: Nuxt) {
   checkSchemaResolverDependencies('yup');
   if (isPackageExists('@vee-validate/yup') && isPackageExists('yup')) {
     logger.info('Using yup with vee-validate');
@@ -161,12 +167,23 @@ function checkForYup(options: VeeValidateNuxtOptions) {
       });
     }
 
+    addMjsAlias('@vee-validate/yup', 'vee-validate-yup', nuxt);
+
     return true;
   }
 
   return false;
 }
 
+function addMjsAlias(pkgName: string, fileName: string, nuxt: Nuxt) {
+  // FIXME: Deprecated, idk why since it duplicate imports
+  nuxt.options.alias[pkgName] =
+    nuxt.options.alias[pkgName] ||
+    resolveModule(`${pkgName}/dist/${fileName}.mjs`, {
+      paths: [nuxt.options.rootDir, import.meta.url],
+    });
+}
+
 declare module '@nuxt/schema' {
   interface NuxtConfig {
     'vee-validate'?: VeeValidateNuxtOptions;

packages/valibot/package.json

@@ -13,7 +13,8 @@
       "types": "./dist/vee-validate-valibot.d.ts",
       "import": "./dist/vee-validate-valibot.mjs",
       "require": "./dist/vee-validate-valibot.cjs"
-    }
+    },
+    "./dist/*": "./dist/*"
   },
   "types": "dist/vee-validate-valibot.d.ts",
   "homepage": "https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation/",

packages/vee-validate/package.json

@@ -13,7 +13,8 @@
       "types": "./dist/vee-validate.d.ts",
       "import": "./dist/vee-validate.mjs",
       "require": "./dist/vee-validate.cjs"
-    }
+    },
+    "./dist/*": "./dist/*"
   },
   "types": "dist/vee-validate.d.ts",
   "homepage": "https://vee-validate.logaretm.com/",

packages/yup/package.json

@@ -14,7 +14,8 @@
       "types": "./dist/vee-validate-yup.d.ts",
       "import": "./dist/vee-validate-yup.mjs",
       "require": "./dist/vee-validate-yup.cjs"
-    }
+    },
+    "./dist/*": "./dist/*"
   },
   "homepage": "https://vee-validate.logaretm.com/v4/guide/composition-api/typed-schema/",
   "repository": {

packages/zod/package.json

@@ -14,7 +14,8 @@
       "types": "./dist/vee-validate-zod.d.ts",
       "import": "./dist/vee-validate-zod.mjs",
       "require": "./dist/vee-validate-zod.cjs"
-    }
+    },
+    "./dist/*": "./dist/*"
   },
   "homepage": "https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation/",
   "repository": {