Typescript loading

[hawkfish]

I have a node project using typescript and managed with yarn, and I would like to use react-vega-lite, but I can't get the example to work.

I installed the components using yarn add vega-lib vega-lite react-vega react-vega-lite. I then added the example code to my existing widget, but when I try to render it, I get runtime errors like this:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ColumnSummaryTable`.

The code looks like:

import VegaLite from 'react-vega-lite';
...
public render()
{
const spec = {
  "description": "A simple bar chart with embedded data.",
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
};

const data = {
  "values": [
    {"a": "A","b": 20}, {"a": "B","b": 34}, {"a": "C","b": 55},
    {"a": "D","b": 19}, {"a": "E","b": 40}, {"a": "F","b": 34},
    {"a": "G","b": 91}, {"a": "H","b": 78}, {"a": "I","b": 25}
  ]
};
return ( <VegaLite spec={ spec } data={ data } /> );
}

Stepping into React.createElement it appears that the result of the <VegaLite invocation is undefined.

This seems like a straightforward use case, but clearly something is not right. Can you tell me what is wrong?

[owenmead]

Likely due to TS not having synthetic default imports by default. You can either try:

import * as VegaLite from 'react-vega-lite';

or turn on the TS compiler option:

--allowSyntheticDefaultImports