React: "Module parse failed: Unexpected character '@'" for TypeScript decorators from NestJs

Viewed 176

I would like to share types between React (create-react-app) frontend and NestJs backend. I use class-validator for validating DTOs in NestJs, but when I import these classes into React app, it throws an error:

Module parse failed: Unexpected character '@' (4:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I am trying with react-app-rewired and adding plugins to .babelrc:

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

It doesn't help and I have the same error.

I also tried npm package react-class-validator https://www.npmjs.com/package/react-class-validator, but the result is the same.

How should I configure React app to be able handle classes with typescript decorators from NestJs?

0 Answers
Related