Babel fails with class-validator in NX Library

Viewed 1115

I have an NX Typescript library which pulls in 'class-validators'.

The initial error I've ran into is

Support for the experimental syntax 'decorators-legacy' isn't currently enabled

So I've added this to my babel.config.json:

"plugins": [
  [
    "@babel/plugin-proposal-decorators",
    {
      "legacy": true
    }
  ]
]

The next error I get is

Unexpected token, expected "{"
........
node_modules/@nrwl/web/src/utils/web-babel-loader.js)

in all my TypeScript files. I'm assuming babel is expecting JavaScript, so I've added

"presets": [
  "@babel/preset-typescript"
],

To my babel.config.json. Now the issue I get with any class that uses class-validator's decorators (@IsDefined(), @IsNotNull(), etc...)

Module parse failed: Unexpected token (10:8)
File was processed with these loaders:
 * ../../../node_modules/@nrwl/web/src/utils/web-babel-loader.js
You may need an additional loader to handle the result of these loaders.

I'm using an NX Workspace, and this is a plain TypeScript library... I'm not 100% sure what's going wrong here. When I run my NestJS server with this library it compiles and runs fine. But for some reason when I run the ReactJS Application, it fails with this error.

Any help is greatly appreciated!

EDIT:

Working babel.config.json

{
  "babelrcRoots": [
    "*"
  ],
  "presets": [
    "@babel/preset-typescript",
    "@babel/preset-env"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-transform-runtime"
    ]
  ]
}

0 Answers
Related