logaretm / vee-validate

✅ Painless Vue forms
https://vee-validate.logaretm.com/v4
MIT License
10.8k stars 1.26k forks source link

vee-validate loags as CommonJS module in ESM context with latest version #4905

Closed aKzenT closed 4 days ago

aKzenT commented 6 days ago

What happened?

The latest vee-validate version uses the exports field to declare its entry points. Our project uses ESM and loaded vee-validate as ESM with the previous version. With the latest version we get the following error however:

Named export 'configure' not found. The requested module 'vee-validate' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'vee-validate'; const { useForm, configure, defineRule, useField } = pkg;

I believe this issue is caused by a combination of various factors:

  1. exports declaration always have priority over other package.json properties like "main" or "module".
  2. exports declarations do not declare the format of the target file. they only target how the package was loaded (e.g. by require or import)
  3. all vee-validate files use the .js file extension, regardless of whether they are in CJS or ESM format
  4. vee-validate does not specify a "type" in package.json
  5. therefore, the .js files are treated as CJS, even if they are ESM files

This is in contrast to the previous version, where the "module" property implicitly marks the target as being an ESM file.

I believe the correct solution is to specify a default type in the "type" field and use explicit file extensiosn (.cjs, .mjs) for the other type. This approach is also documented on the official NodeJS documentation: https://nodejs.org/api/packages.html#dual-commonjses-module-packages

Further resources: https://stackoverflow.com/a/77287842 https://nodejs.org/api/esm.html#modules-ecmascript-modules https://nodejs.org/api/packages.html#dual-commonjses-module-packages

Reproduction steps

1. 2. 3. ...

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

Relevant log output

No response

Demo link

none

Code of Conduct

logaretm commented 4 days ago

Didn't realize that the names are required to be ending with .cjs or .mjs. Would just adding type and set it to module in package.json work?

I cannot reproduce this issue in my Vite or Nuxt setup, is there an environment where this can be reproduced/observed?

EDIT: I can reproduce in a simple Node.js environment running .mjs and .cjs imports.

logaretm commented 4 days ago

Should be fixed with v4.14.4

aKzenT commented 4 days ago

can confirm that v4.14.4 fixes the issue for us. Thank you very much for the fast response!