Vite + React - leads to undefined error

[gregfenton]

What version of this package are you using? v 3.22.1

What operating system, Node.js, and npm version?

• MacOS: Ventura 13.0.1 (22A400)
• node: v16.16.0
• npm: 8.11.0

What happened? This is likely exactly the same issue as #455

REPRO STEPS (approx. 5 minutes or less):

1. npm create vite@latest my-vite-react-app -- --template react
2. cd my-vite-react-app
3. npm install
4. npm install validatorjs
5. replace the contents of src/App.jsx with the following:

   import { useState } from 'react';
   import './App.css';
   import Validator from 'validatorjs';
   
   const rules = { city: 'required', province: 'required' };
   const goodData = { city: 'Toronto', province: 'Ontario' };
   const badData = { city: undefined, province: 'Ontario' };
   
   export const App = () => {
     const [isValid, setIsValid] = useState();
   
     const doValid = () => setIsValid(new Validator(goodData, rules).passes());
     const doInvalid = () => setIsValid(new Validator(badData, rules).passes());
   
     return (
       <div className='App'>
         <h2>Is valid: {isValid ? 'true' : 'false'} </h2>
         <div>
           <button onClick={doValid}> VALID </button>{' '}
           <button onClick={doInvalid}> INVALID </button>
         </div>
       </div>
     );
   };
   

6. npm run dev
7. in your browser, click the VALID button and see that "Is valid: true` displays
8. click INVALID button and check the browser's JS console. You will see the same exception as reported initially.

What did you expect to happen?

EXPECTED: Both calls to Validator.passes() run without exceptions being thrown, and that the INVALID case returns an appropriate validation message.

ACTUAL: an exception is thrown in the INVALID case and no validation message is available.

Are you willing to submit a pull request to fix this bug?

Yes if someone suggests a valid solution.

[gregfenton]

My suspicion, though I don't know much about "bundling", is that, I believe, the library attempts to load "language files" via require_method('./lang/' + lang) and that require_method = require;

I suspect the issue is that the language files are not being bundled by Vite?

I'm not sure how/if I can:

• tell Vite to bundle the resource files of a named NPM ??
• fork the NPM and add some vite-specific configuration ??
• fork the NPM and add some additional NPM or JS configuration such that its files bundle correctly (with Vite or with all bundlers??)

Pointers to docs or concepts or appropriate terminology for what I'm looking at here would be GREATLY appreciated!!

[derekcannon]

I'm having similar issues when switching over to Vite from Webpack, while using MobX React Form and ValidatorJS as the validator. Setting a field to "required", and attempting to validate it returns the following:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'def') at Messages._getTemplate (messages.js:103:29) at Messages.render (messages.js:82:25) at Validator._addFailure (validator.js:151:29) at Validator.check (validator.js:73:16) at Validator.passes (validator.js:494:17) at DVR2.validateFieldSync (DVR.js:126:22) at DVR2.validateField (DVR.js:88:12) at Validator.js:160:33 at _createBaseFor.js:17:11 at baseForOwn (_baseForOwn.js:13:20)

[stellarhoof]

Not the best, but with yarn, package.json can be patched to change https://github.com/mikeerickson/validatorjs/blob/master/package.json#L21 from "main": "./src/validator.js", to "main": "./dist/validator.js",

[ashalfarhan]

I'm facing the same issue, aliasing the module to point to the dist directory works fine for me:

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      validatorjs: 'validatorjs/dist/validator.js',
    },
  },
});

[foxhound87]

I'm facing the same issue, aliasing the module to point to the dist directory works fine for me:

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      validatorjs: 'validatorjs/dist/validator.js',
    },
  },
});

This solution worked until I called useLang method. Needs a fix to handle language.

[sebaguse]

I'm facing the same issue, aliasing the module to point to the dist directory works fine for me:

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      validatorjs: 'validatorjs/dist/validator.js',
    },
  },
});

I'm using Nuxt 3 and this trick works fine in development server but with build validation.errors.all() returns just an empty object, anyone has an idea why?