Attempted import error: 'vl' is not exported from 'vega-lite-api'

#1

Hi . I really appreciate all the tutorials available and I was following one on vega-lite-api and react.

(https://www.youtube.com/watch?v=RKJPMfKsAsQ&feature=emb_logo)

I was getting an error after importing the vega-lite-api and using it.

Attempted import error: ‘vl’ is not exported from ‘vega-lite-api’.

In your code I saw some bundle.js which I did not understand why that was needed. I have been desperately wanting to analyze some data with the learning so far but stuck because of this error. Any help will be very much appreciated

REPLY

#2

Greetings!

Are you working inside VizHub or outside of VizHub?

I believe vega-lite-api only uses the default export, so it would need to be

import vl from 'vega-lite-api';

not

import { vl } from 'vega-lite-api';

If you’re working outisde VizHub, the imports depend on what build tools you are using.

#3

I am working outside vizhub and trying to us this in a standard react app. I am doing npm - install and the packages are getting installed to the node module folder.

I have tried import vl from ‘vega-lite-api’; but that also gives me error.

Attempted import error: ‘vega-lite-api’ does not contain a default export (imported as ‘vl’).

I am bit new to react so still trying to figure out what the issue is. In one of your videos you talked about rollup and bundle.js which I believe might have some role but could not understand the purpose of it clearly.

thank you

#4

Got it. I investigated a bit. I ran:

create-react-app vl-test
cd vl-test/
npm install -S vega-lite-api
npm start

I added the following to App.js:

import vl from 'vega-lite-api';

console.log(vl);

I was able to reproduce the error “Attempted import error: ‘vega-lite-api’ does not contain a default export (imported as ‘vl’).”

This worked:

import * as vl from 'vega-lite-api';

console.log(vl);
#5

This issue stumped me for last 3-4 days. I should be able to move forward now. Thank you so much!

#6

Fantastic! Happy to hear it’s working for you.