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"
]
]
}