I get this issue when trying to use this addon : ``` ERROR in ../node_modu

Directory ace-widget
1

Hi Sergio,

I get this issue when trying to use this addon :

ERROR in ../node_modules/@granite-elements/ace-widget/ace-widget.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
SyntaxError: /home/gilles/git-repo/smartnetworkagent/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.

Even after having tried to add the plugin @babel/plugin-syntax-import-meta to .babelrc, it still doesn’t work, I get the same error as shown above.

Could you also provide us with information on how to proceed to manually add the resources (themes and languages types) to Vaadin ?

Thanks in advance.

Regards,
Gilles.

2

I am getting the same error. Kindly assist

3

Same here:


ERROR in …/node_modules/@granite-elements/ace-widget/ace-widget.js

Module build failed (from …/node_modules/babel-loader/lib/index.js):

SyntaxError: C:[…]
\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.

[…]


@ …/target/frontend/generated-flow-imports.js 71:0-52

4

This is my webpack.config.js and it works fine:

const merge = require('webpack-merge');
const flowDefaults = require('./webpack.generated.js');

module.exports = merge(flowDefaults, {
	module: {
		rules: [
			{
				test: /ace-widget.js$/,
				loader: require.resolve('@open-wc/webpack-import-meta-loader'),
			},
		],
	},
});
5

Sorry for the delay in responding, Sebastian Ciesielski’s solution is correct, but this does not allow us to use the themes and the language mode, I update the component solving the commented errors and without using webpack.config.js.
I enclose an image of a base project with functional ace-widget:

https://drive.google.com/open?id=1Tv6MNLg5AK7fFSrbn6U8A5Mkr35IoJoG

regards.

6

Yeah, it’s working better now.

Three things that still are missing:

  • setFontSize() method
  • setReadonly() method
  • properly working setWidth() and setHeight() methods (right now they are setting width and height of component but not editor)
7

I made changes regarding what you mentioned, I uploaded the project to github.

8

The edit you made, it appears that it throws a NullPointerException.