Cannot use Vega-lite-api with React

[Sagar Mainkar]

Is there a example of using vega-lite-api with React. The JSON form works with vegaembed but if I use the vl.mar....(). render() actually it gives build errors. 

It says it requires a different loader I am not sure about  the error.

Regards

Sagar

[Dominik Moritz]

If you call .toSpec() instead of .render(), you get the JSON spec that you can pass to Vega-Embed. 

--
You received this message because you are subscribed to the Google Groups "vega-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/vega-js/CAOx-eMCF9bpvW1pY1Le-GiFCQzo0Y_2vBP2NKejq%2BMJLO2s76A%40mail.gmail.com.

[Sagar Mainkar]

Appreciate the response but the problem that I zeroed in is if I had the following import 

import * as vegaLite from "veg-lite-api";

I get this error to compile This is in an app created using create-react-app

./node_modules/vega-lite/build/src/compile/model.js 102:27

Module parse failed: Unexpected token (102:27)

File was processed with these loaders:

 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js

You may need an additional loader to handle the result of these loaders.

|     this.view = replaceExprRef(view); // If name is not provided, always use parent's givenName to avoid name conflicts.

| 

>     this.name = spec.name ?? parentGivenName;

|     this.title = isText(spec.title) ? {

|       text: spec.title

[Sagar Mainkar]

sorry it is 

import * as vegaLite from "vega-lite" 

this gives problem not the vega-lite-api

regards

Sagar

[Dominik Moritz]

The unexpected token issue sounds like a problem with babel where it doesn’t know how to handle es2020 features (namely ??). Please update to babel 7.8 (https://babeljs.io/blog/2020/01/11/7.8.0). 

[Sagar Mainkar]

yes got it , it is a babel transpiler issue not a loader issue.

Thanks.