# React Vega Issue in Kibana 8.6.2 Version **URL:** \ **Category:** Kibana\ **Tags:** vega\ **Created:** [April 10, 2023, 2:58pm UTC](https://discuss.elastic.co/t/react-vega-issue-in-kibana-8-6-2-version/329665 "2023-04-10T14:58:41Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![mohammedniyaz](https://avatars.discourse-cdn.com/v4/letter/m/a88e57/32.png) [@mohammedniyaz](https://discuss.elastic.co/u/mohammedniyaz)\ **Post date:** [April 10, 2023, 2:58pm UTC](https://discuss.elastic.co/t/react-vega-issue-in-kibana-8-6-2-version/329665/1 "2023-04-10T14:58:41Z")
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](https://webpack.js.org/concepts#loaders) │ | // 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](https://webpack.js.org/concepts#loaders) │ | // 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. ---
**Author:** ![drewdaemon](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/drewdaemon/32/97779_2.png) [@drewdaemon](https://discuss.elastic.co/u/drewdaemon)\ **Post date:** [April 11, 2023, 8:36pm UTC](https://discuss.elastic.co/t/react-vega-issue-in-kibana-8-6-2-version/329665/2 "2023-04-11T20:36:20Z")
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](https://github.com/elastic/kibana/issues/new?assignees=&labels=bug,Team:Visualizations,Feature:Vega&template=Bug_report.md) so we can look into the issue. ---
**Author:** ![mohammedniyaz](https://avatars.discourse-cdn.com/v4/letter/m/a88e57/32.png) [@mohammedniyaz](https://discuss.elastic.co/u/mohammedniyaz)\ **Post date:** [April 12, 2023, 7:02am UTC](https://discuss.elastic.co/t/react-vega-issue-in-kibana-8-6-2-version/329665/3 "2023-04-12T07:02:49Z")
Hi @drewdaemon , 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. ---
**Author:** ![drewdaemon](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/drewdaemon/32/97779_2.png) [@drewdaemon](https://discuss.elastic.co/u/drewdaemon)\ **Post date:** [April 12, 2023, 6:41pm UTC](https://discuss.elastic.co/t/react-vega-issue-in-kibana-8-6-2-version/329665/4 "2023-04-12T18:41:03Z")
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](https://babeljs.io/)). In webpack, you generally configure custom parsing behavior via a [loader](https://webpack.js.org/concepts/#loaders). Here is the [babel-loader](https://webpack.js.org/loaders/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! ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [May 10, 2023, 6:41pm UTC](https://discuss.elastic.co/t/react-vega-issue-in-kibana-8-6-2-version/329665/5 "2023-05-10T18:41:57Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.