question: Angular Warning: CommonJS or AMD dependencies can cause optimization bailouts.

[reed-lawrence]

Upon adding class-validator to my Angular project, I get this warning when building:

WARNING in /node_modules/class-validator/esm2015/decorator/common/IsLatLong.js depends on 'validator'. CommonJS or AMD dependencies can cause optimization bailouts.

I am not using the @IsLatLong() decorator so I'm assuming the tree shaking/webpack will ignore this, but I just wanted to put a question out there for reassurance!

[kemaric]

I have the same warning for IsPostalCode.js as well.

Warning: /node_modules/class-validator/esm2015/decorator/string/IsPostalCode.js depends on 'validator'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

[NoNameProvided]

This warning raised for the validator package (https://github.com/validatorjs/validator.js) we use under the hood for validation. There is nothing we can do about this, they simply don't provide ES import/export version of their lib, so Angular doesn't know what to import so it imports everything.

We already provide all main package formats in our published package, so once validator does the same it will be auto-picked by Angular.

[NoNameProvided]

I will go forward and close this as we have nothing to fix this.

[ThorstenKunz]

I will go forward and close this as we have nothing to fix this.

I don't think this is correct. According to validator.js github site they do provide tree-shakeable ES imports. You have to replace the import paths a little bit:

import isDivisibleByValidator from 'validator/lib/isDivisibleBy';
with this
import isDivisibleByValidator from 'validator/es/lib/isDivisibleBy';

Then the WARNING should go away and projects using class-validator will be able to get optimized better.

[mcelotti]

I had the same problem and, according to https://angular.io/guide/build#configuring-commonjs-dependencies, I added "validator" to "allowedCommonJsDependencies" inside my "angular.json" file:

            "allowedCommonJsDependencies": [
              "validator"
            ]

This fixed the issue.

[NoNameProvided]

I don't think this is correct. According to validator.js github site they do provide tree-shakeable ES imports.

As do we. The Angular compiler when building an app should pick up that both this lib and validator.js has ES exports and use that version. We explicitly tell the bundlers which versions we support in package.json: https://github.com/typestack/class-validator/blob/develop/package.json#L7-L11 and from the initial error messages it's visible that Angular picks up the correct version from our lib. It should do the same for the validator library but I assume it cannot because these values are not specified in the package.json: https://github.com/validatorjs/validator.js/blob/master/package.json.

Closing again as I still believe this is a problem with the configuration of https://github.com/validatorjs/validator.js/.

Feel free to open an issue there and link back so others can see how this progresses. Thanks!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.