Typescript error in compiling fields

[hrahimi270]

Hi there.

This error just comes up out of nowhere. Everything was fine. But suddenly after changing some sort of versioning, this happened.
Actually, I had changed the project a little bit based on my own need (Great job BTW).
The error is that when I start the project with yarn start and lerna starts to run the project, this problem happens.
This is the error:

Failed to compile.
./node_modules/@my-workspace/my-field-string/src/ui/InputComponent.tsx 26:0
Module parse failed: The keyword 'interface' is reserved (26:0)
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
| 
> interface MyStringInputComponent extends Omit<MyFieldProps, "path"> {
|        path: string | string[];
| }

As you can see, the ui inside /packages can not parse the fields.

Just to test, I changed the importing of the fields inside ui/src/utils/fields.ts and instead of importing the src directory, I imported the lib directory of fields that is a compiled version of the src as you know. And this step passed successfully but had another error in the console of the browser (that is not related to this issue right now).

This is fields after replacing src with lib directory:

// ui/src/utils/fields.ts
if (process.env.NODE_ENV === "development") {
	registerField("asset", require("@my-workspace/my-field-asset/lib/ui").default);
	registerField("boolean", require("@my-workspace/my-field-boolean/lib/ui").default);
	registerField("datetime", require("@my-workspace/my-field-datetime/lib/ui").default);
	registerField("document", require("@my-workspace/my-field-document/lib/ui").default);
	registerField("geopoint", require("@my-workspace/my-field-geopoint/lib/ui").default);
	registerField("group", require("@my-workspace/my-field-group/lib/ui").default);
	registerField("number", require("@my-workspace/my-field-number/lib/ui").default);
	registerField("select", require("@my-workspace/my-field-select/lib/ui").default);
	registerField("slice", require("@my-workspace/my-field-slice/lib/ui").default);
	registerField("string", require("@my-workspace/my-field-string/lib/ui").default);

	console.log("using development fields");
}

I guess the problem is with Webpack as it can not understand ts and tsx files inside node_modules of the ui. But the weird thing is that this problem did not exist before!

You have any idea why this happens and how can I fix this?
Thanks.