Issues with Support for the experimental syntax 'importMeta' isn't currentl

Hi, I am completely new to this stuff, because I am mostly working with Java. I have converted my project from Vaadin 14 Flow 1 compatibility mode to Vaadin 14 Flow +2.

Basically what I did is change configuration. This thing runs fine without any external components. I wanted to add ace-widget addon. Which is based on Polymer 3
https://vaadin.com/directory/component/lostinbrittanyace-widget
I want to write custom UI element.

@SuppressWarnings("serial")
@Tag("ace-widget")
@NpmPackage(value = "@granite-elements/ace-widget", version = "2.2.7-b1")
@JsModule("@granite-elements/ace-widget/ace-widget.js")
public class AceWidgetEditor  extends AbstractSinglePropertyField<AceWidgetEditor, String> implements HasSize, Focusable<AceWidgetEditor> {

	public AceWidgetEditor() {
		super("value", "", false);
	}
....
}

When I try to build the project I get stuck on this issue with importMeta.

ERROR in ../node_modules/@granite-elements/ace-widget/ace-widget.js?babel-target=es5
Module build failed (from ../node_modules/babel-loader/lib/index.js):
SyntaxError: (REDACTED)\node_modules\@granite-elements\ace-widget\ace-widget.js: Support for the experimental syntax 'importMeta' isn't currently enabled (154:43):

  152 |    * More info on @Polymer/lib/mixins/element-mixin.js`
  153 |    */
> 154 |   static get importMeta() { return import.meta; } 
      |                                           ^
  155 | 
  156 |   async connectedCallback() {
  157 |     super.connectedCallback();

Add @babel/plugin-syntax-import-meta (https://git.io/vbKK6) to the 'plugins' section of your Babel config to enable parsing.
    at Parser.raise ((REDACTED)\node_modules\@babel\parser\lib\index.js:6930:17)
    at Parser.expectPlugin ((REDACTED)\node_modules\@babel\parser\lib\index.js:8328:18)
    at Parser.parseImportMetaProperty ((REDACTED)\node_modules\@babel\parser\lib\index.js:9647:12)
    at Parser.parseExprAtom ((REDACTED)\node_modules\@babel\parser\lib\index.js:9422:23)
    at Parser.parseExprSubscripts ((REDACTED)\node_modules\@babel\parser\lib\index.js:9165:23)
    at Parser.parseMaybeUnary ((REDACTED)\node_modules\@babel\parser\lib\index.js:9145:21)
    at Parser.parseExprOps ((REDACTED)\node_modules\@babel\parser\lib\index.js:9011:23)
    at Parser.parseMaybeConditional ((REDACTED)\node_modules\@babel\parser\lib\index.js:8984:23)
    at Parser.parseMaybeAssign ((REDACTED)\node_modules\@babel\parser\lib\index.js:8930:21)
    at Parser.parseExpression ((REDACTED)\node_modules\@babel\parser\lib\index.js:8880:23)
    at Parser.parseReturnStatement ((REDACTED)\node_modules\@babel\parser\lib\index.js:10980:28)
    at Parser.parseStatementContent ((REDACTED)\node_modules\@babel\parser\lib\index.js:10659:21)
    at Parser.parseStatement ((REDACTED)\node_modules\@babel\parser\lib\index.js:10611:17)
    at Parser.parseBlockOrModuleBlockBody ((REDACTED)\node_modules\@babel\parser\lib\index.js:11187:25)
    at Parser.parseBlockBody ((REDACTED)\node_modules\@babel\parser\lib\index.js:11174:10)
    at Parser.parseBlock ((REDACTED)\node_modules\@babel\parser\lib\index.js:11158:10)
    at Parser.parseFunctionBody ((REDACTED)\node_modules\@babel\parser\lib\index.js:10177:24)
    at Parser.parseFunctionBodyAndFinish ((REDACTED)\node_modules\@babel\parser\lib\index.js:10147:10)
    at Parser.parseMethod ((REDACTED)\node_modules\@babel\parser\lib\index.js:10101:10)
    at Parser.pushClassMethod ((REDACTED)\node_modules\@babel\parser\lib\index.js:11591:30)
    at Parser.parseClassMemberWithIsStatic ((REDACTED)\node_modules\@babel\parser\lib\index.js:11548:14)
    at Parser.parseClassMember ((REDACTED)\node_modules\@babel\parser\lib\index.js:11453:10)
    at (REDACTED)\node_modules\@babel\parser\lib\index.js:11408:14
    at Parser.withTopicForbiddingContext ((REDACTED)\node_modules\@babel\parser\lib\index.js:10486:14)
    at Parser.parseClassBody ((REDACTED)\node_modules\@babel\parser\lib\index.js:11385:10)
    at Parser.parseClass ((REDACTED)\node_modules\@babel\parser\lib\index.js:11359:22)
    at Parser.parseStatementContent ((REDACTED)\node_modules\@babel\parser\lib\index.js:10653:21)
    at Parser.parseStatement ((REDACTED)\node_modules\@babel\parser\lib\index.js:10611:17)
    at Parser.parseBlockOrModuleBlockBody ((REDACTED)\node_modules\@babel\parser\lib\index.js:11187:25)
    at Parser.parseBlockBody ((REDACTED)\node_modules\@babel\parser\lib\index.js:11174:10)
    at Parser.parseTopLevel ((REDACTED)\node_modules\@babel\parser\lib\index.js:10542:10)
    at Parser.parse ((REDACTED)\node_modules\@babel\parser\lib\index.js:12051:10)
    at parse ((REDACTED)\node_modules\@babel\parser\lib\index.js:12102:38)
    at parser ((REDACTED)\node_modules\@babel\core\lib\transformation\normalize-file.js:168:34)
    at normalizeFile ((REDACTED)\node_modules\@babel\core\lib\transformation\normalize-file.js:102:11)
    at runSync ((REDACTED)\node_modules\@babel\core\lib\transformation\index.js:44:43)
 @ ../target/frontend/generated-flow-imports.js?babel-target=es5 10:0-52

I have no idea how to enable this or how to bypass it. I tried adding using "@open-wc/webpack-import-meta-loader": "^0.3.4", into devDependencies in package.json with no success.
I have no idea where I can put the @babel/plugin-syntax-import-meta.

Any help would be appreciated.
Thank you.

Hello, webpack currently doesn’t support import.meta https://github.com/webpack/webpack/issues/6719

There are unofficial plugins that attempt to solve this problem like [this one]
(https://github.com/cfware/babel-plugin-bundled-import-meta) but configuring them to work with Flow might be complex.

Personally, I would recommend to fork [ace-widget]
(https://github.com/LostInBrittany/ace-widget/blob/master/ace-widget.js) custom element and update it to be webpack-compatible according to this [suggestion]
(https://github.com/ajaxorg/ace-builds/issues/129#issuecomment-441181434) by ace maintainers.