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

[cexbrayat]

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:

1. 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": {}}}'

1. install vee-validate

npm install vee-validate --save

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

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

1. 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)

[logaretm]

If we change the rules.js packaging to UMD we will lose the tree-shaking capabilities. I'm inclined to add another UMD bundle for rules though.

Generally, you should solve this issue by adding an exception for vee-validate in your babel config which is what Nuxt does under the hood.

[cexbrayat]

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!

[logaretm]

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

[lighta971]

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')

[logaretm]

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.

[aholzner]

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

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

[cexbrayat]

@aholzner I did, but in a TS project, it's not enough. Maybe because there is no transformer for JS files. But even adding babel-jest to handle JS files (which is sad for a TS project), it did not solve the issue. So I'm probably missing something, maybe obvious, but I did not find the solution when I investigated. Thanks for pitching in though 👍

[logaretm]

I just created a new project as you mentioned in your project, but I installed these dependencies as well:

"@babel/core": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^24.9.0",

And the tests ran without any problems, I didn't have to configure babel-jest to handle js files as I think the vue-jest already does that.

If this is still an issue for you, you could try to upload a broken repository. I will PR it with my changes and see if that works.

[cexbrayat]

@logaretm Thank you for taking the time to explore this issue. I tried your workaround but no luck for me.
Here is a simple repro https://github.com/cexbrayat/vee-v3
Just run:

npm i
npm run test:unit

and you should reproduce (or I missed something). The last commit contains your workaround.

(Even if this was the proper workaround, it would still be sad to have to set up extra deps just to run tests for one library whereas the rest of the eco-system does not need this)

[cexbrayat]

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.

[aldarund]

@logaretm its still an issue.
And it also lead to syntax error in for example nuxt, because nuxt dont transpile dependencies by default.
I mean it can be changed to tell nuxt to compile via transpile, but its not good behaviour.
there shouldnt really be es6 code in dist

[logaretm]

@aldarund It's just the export that's ES6 and it's primarily done to allow for tree-shaking. Without it you will be importing the whole rules bundle even if you just use one rule.

There is a umd build available for the rules if you are interested in using that instead, which will not have tree-shaking.

[aldarund]

@logaretm I dont think tree shaking is working. I dont see you have sideEffects in package.json
https://webpack.js.org/guides/tree-shaking/

[dsvanidze]

I changed transform and transformIgnorePatterns in jest.config.js and fixed the problem:

  transform: {
     ...
    'vee-validate/dist/rules': 'babel-jest',
  },

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

It was not sufficient for me to change only transformIgnorePatterns.

[Tofandel]

So this cannot be used without babel??
Could we have a separate umd with all the rules for non babel project..
Trying to use this on a node js server for server side validation without babel

[ceilfors]

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

[gmbarroso]

Thsnks for the solution!!!

[christopher4lis]

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.

[zadigus]

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.

[pellul]

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.

[dmitry]

@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.

[logaretm]

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