Minimal example fails with 'Element Type is Invalid'

[colin-roy-ehri]

I'm implementing the minimal Visualization Component example:

<Query sdk={sdk} query={queryNumber}>
      <Visualization  />
    </Query>

This minimal example fails when rendered. The page will display successfully the query results, dimensions and measures, but no visualization.

Below is the console error:

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 VisualizationComponent.
in VisualizationComponent (created by Visualization)
in ErrorBoundary (created by Visualization)
in Visualization (created by EmbedComponent)
in Query (created by EmbedComponent)
in EmbedComponent (created by VizComponent)

Is there a required property for the element?

To reproduce, you could try running this embedded Looker frontend: https://github.com/bytecodeio/LookerEmbeddedReference-Frontend . Then navigate to the context https://localhost:3001/viz-component Installation instructions include running a backend server also sorry for the hassle. I've granted access to the contributors of this code. Let me know if anyone else needs access..

[colin-roy-ehri]

[mdodgelooker]

Hi @colin-roy-ehri thanks for posting! I'm not finding the Query or Visualization components in the main branch of your repo. Is there another branch I can look at?

[mdodgelooker]

In the meantime, the error you're seeing could mean that the query data is configured for a type of visualization that the @looker/visualizations package does not yet support. Here is a list of the supported types:

area
bar
column
default
line
pie
scatter
single_value
sparkline
table

[colin-roy-ehri]

Sorry about the example not being complete, the code wasn't merged into the main branch yet.

Thanks @mdodgelooker ! You're right, it was a wrong viz type in the query. I thought the component would do auto-selection or allow a UI for selection, but I see now that it mirrors the viz type from the query. Good to know. I'll add a PR for a little custom error message if this happens to others, as a contribution.

[colin-roy-ehri]

#2931