vee-validate: "Unexpected token export" when importing validation rules with Jest

Versions

vee-validate: 3.0.4
vue: 2.6.10

Describe the bug I’ve seen that this issue has already been opened for Nuxt (#2282, #2249, #2240) and that the solution in that case is documented. But I encounter it in a vue-cli app, using TS and Jest, and I struggled to make it work.

To reproduce Steps to reproduce the behavior:

create a CLI app with TS and Jest

npx @vue/cli create vee-v3 -m npm --inlinePreset '{"useConfigFiles": true,"plugins": {"@vue/cli-plugin-typescript": {"classComponent": false},"@vue/cli-plugin-unit-jest": {}}}'

install vee-validate

npm install vee-validate --save

add vee-validate/dist/rules to HelloWorld.vue

import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';
extend('required', required);

run the unit tests

npm run test:unit

throws:

export { alpha$1 as alpha, alpha_dash, alpha_num, alpha_spaces, between, confirmed, digits, dimensions, email, excluded, ext, image, integer, is, is_not, length, max, max_value, mimes, min, min_value, numeric, oneOf, regex, required, required_if, size };
    ^^^^^^

    SyntaxError: Unexpected token export

I tried to tweak jest.config.js but I’m still running into the issue… I tried several approches from https://github.com/facebook/jest/issues/2550 without success.

Do you have a working configuration for this use-case? If so, it would be great to add it to the documentation.

(But TBH it would be better to change the rules.js packaging to make the issue go away, and avoid contorsions with build/testing tools)

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 3
Comments: 23 (14 by maintainers)

Commits related to this issue

feat: add new umd bundle for default rules #2310 — committed to logaretm/vee-validate by logaretm 5 years ago

Most upvoted comments

Same as @zadigus above, I tried everything and almost gave up but I went up with the following solution (with vee-validate 3.1):

Changing my rules import from

import { required } from 'vee-validate/dist/rules';

to the following

import { required } from 'vee-validate/dist/rules.umd.js';

No need for transformIgnorePatterns nor transform, it just worked as-it for me.

+75

pellul on Jan 25, 2021

@cexbrayat Have you tried adding a transform ignore pattern to your jest configuration file/object?

transformIgnorePatterns: ['/node_modules/(?!vee-validate/dist/rules)'],

+42

aholzner on Sep 9, 2019

Thanks for your reply @logaretm

I’m not an expert on packaging, but you can offer other module formats without losing the tree-shaking capabilities. We offer Angular as an UMD and esm2015, esm5, fesm2015, fesm5 bundles for example (but I never worked on this part, so I can’t really help, sorry). Without going this far you can probably fix this. While you’re at it, IMHO, an import from vee-validate/rules would look better (or even a single entry point vee-validate). You can also look at what RxJS does, as it offers two entry points (a main one rxjs for static operators, and a second one rxjs/operators for the others).

Anyway, to come back to the issue, my point was: in a TS project, you don’t have a Babel config. So the example in the doc is not enough to solve it. I think the issue should be reopened until figured out and properly documented, or that the bundling format is fixed on your part. As more and more Vue project are going to use TS with Vue 3, it would be awesome to have vee-validate working out of the box of course 😃 I look forward to properly test vee-validate v3 once this is fixed!

cexbrayat on Sep 8, 2019

Changing my .babelrc to babel.config.js with:

module.exports = { presets: ['@babel/preset-env'] }

got it working.

Make sure to include that along with the jest config updates mentioned above.

christopher4lis on Mar 3, 2020

@dmitry I added a note to the docs, thank you

logaretm on Jul 5, 2020

@logaretm This must be added to the docs of vee-validate, as so many people are using babel transformations and have exactly the same issue.

dmitry on Jul 2, 2020

I experienced exactly that problem. I tried everything proposed in this thread as well as most of the stuff google found for me. After 2 hours of vain attempts, I got sick of the problem and switched to vuelidate, even though I find it much less elegant. It’s really annoying, because vee-validate works fine in my storybook, it works fine in the application, but for some annoying reason, it doesn’t work with jest.

zadigus on Apr 11, 2020

If anyone stumbles on this issue, I managed to make it work by using Vue CLI v4 (currently in RC), because it uses Jest 24. Then you’ll need to add a basic Babel config and transformIgnorePatterns: ['/node_modules/(?!vee-validate/dist/rules)'] to your Jest config.

cexbrayat on Oct 5, 2019

With the Vue CLI 4 typescript project:

I had to create babel.config.js to solve this issue, as per described here
I didn’t need to configure transform to use babel-jest, as the preset @vue/cli-plugin-unit-jest/presets/typescript will come with it
I didn’t need to include any extra dependencies, as Vue CLI have included all of these
I still need to configure the transformIgnorePatterns

ceilfors on Feb 18, 2020

I end up importing the full package and it works

import {
  localize,
  setInteractionMode,
} from 'vee-validate/dist/vee-validate.full'
import fr from 'vee-validate/dist/locale/fr.json'

localize({
  fr,
})

setInteractionMode('eager')

lighta971 on Sep 8, 2019

Agreed, I will tag this as an enhancement for now.

logaretm on Sep 8, 2019

Same as @zadigus above, I tried everything and almost gave up but I went up with the following solution (with vee-validate 3.1):
Changing my rules import from
import { required } from 'vee-validate/dist/rules';
to the following
import { required } from 'vee-validate/dist/rules.umd.js';
Not need for transformIgnorePatterns nor transform, it just worked as-it for me.

Thanks, this does work but I’m now having issues with Typescript : Could not find a declaration file for module 'vee-validate/dist/rules.umd'…

EDIT: follow this article if you’re using Nuxt https://medium.com/@yusufznl/how-to-validate-forms-in-nuxt-with-vee-validate-eef45508c3d4

sundowndev on Jan 25, 2021

I have added a umd option for rules but I’m not closing this yet as I have a few stuff to take a look at.

logaretm on Sep 9, 2019