React Vega Issue in Kibana 8.6.2 Version

[mohammedniyaz]

Hi Team,
We are facing the below error while embedding the react vega in kibana 8.6.2 version.
Please let you know any solution for this requirement or any fix for the below mentioned issue.

React Vega - Component

│ np bld log [20:14:06.520] [error][@kbn/optimizer] [treeVega] build
│ np bld log [20:14:06.520] [error][@kbn/optimizer] Optimizations failure.
│ 118 modules
│
│ ERROR in /home/vegatest/kibana/node_modules/vega-embed/build/vega-embed.js 4232:21
│ Module parse failed: Identifier directly after number (4232:21)
│ You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
│ | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
│ | const editor = window.open(url);
│ > const wait = 10_000;
│ | const step = 250;
│ | const {
│ @ /home/vegatest/kibana/node_modules/react-vega/lib/VegaEmbed.js 10:40-61
│ @ /home/vegatest/kibana/node_modules/react-vega/lib/Vega.js
│ @ /home/vegatest/kibana/node_modules/react-vega/lib/index.js
│ @ ./public/components/app.tsx
│ @ ./public/application.tsx
│ @ ./public/plugin.ts
│ @ ./public/index.ts
│ @ /home/vegatest/kibana/node_modules/@kbn/optimizer/target_node/src/worker/entry_point_creator.js
np bld log [20:14:06.520] [warning][@kbn/optimizer] worker stderr Browserslist: caniuse-lite is outdated. Please run:
np bld log [20:14:06.521] [error][@kbn/optimizer] webpack compile errors
│ np bld log [20:14:06.521] [error][@kbn/optimizer] [treeVega] build
│ np bld log [20:14:06.521] [error][@kbn/optimizer] Optimizations failure.
│ 118 modules
│
│ ERROR in /home/vegatest/kibana/node_modules/vega-embed/build/vega-embed.js 4232:21
│ Module parse failed: Identifier directly after number (4232:21)
│ You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
│ | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
│ | const editor = window.open(url);
│ > const wait = 10_000;
│ | const step = 250;
│ | const {
│ @ /home/vegatest/kibana/node_modules/react-vega/lib/VegaEmbed.js 10:40-61
│ @ /home/vegatest/kibana/node_modules/react-vega/lib/Vega.js
│ @ /home/vegatest/kibana/node_modules/react-vega/lib/index.js
│ @ ./public/components/app.tsx
│ @ ./public/application.tsx
│ @ ./public/plugin.ts
│ @ ./public/index.ts
│ @ /home/vegatest/kibana/node_modules/@kbn/optimizer/target_node/src/worker/entry_point_creator.js
np bld log [20:14:06.521] [warning][@kbn/optimizer] worker stderr npx update-browserslist-db@latest

Concepts | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

[Andrew_Tate (Drew Tate)]

Hi @mohammedniyaz . Is this coming from Kibana's default custom visualization editor or are you using a custom plugin or some other custom method of loading the vega library?

If you aren't doing anything custom and still seeing this error, please file a bug report so we can look into the issue.

[mohammedniyaz]

Hi @Andrew_Tate , Thanks for the quick response.
We are creating a custom plugin , Inside we are importing the React-Vega to show the charts.
Please let us know how to proceed with this further.

[Andrew_Tate (Drew Tate)]

Hi @mohammedniyaz — I'm curious why you're trying bring in Vega through a custom plugin when we already offer it through the custom visualization editor?

I don't think I can be of much assistance here (though others in the community may know more about custom plugin development).

Here's what I will say:

Kibana does not run a build step for custom plugins so any third-party dependencies such as react vega would need to be bundled with your custom plugin code before placing your plugin in the plugins Kibana directory.

Based on the Webpack output you posted, it looks like Webpack is running into a parse error as it tries to read a javascript file in the vega_embed dependency.

The could mean that the problem file is using more recent Javascript syntax than your webpack configuration supports (in which case you might need a transpiler such as Babel). In webpack, you generally configure custom parsing behavior via a loader. Here is the babel-loader.

But, this is not the only possibility for why Webpack might have trouble parsing that file. In any case, I'd encourage you to take a look at the issues on that package's Github repository for better guidance.

If you have an issue or a question that has to do specifically with Kibana, feel free to post again. Hope this helps!