Using any non-line chart in a Vue 3 component, billboard.js throws error seeking line to be imported

[RobSpectre]

Trying to use billboard.js in a Vue 3 component - it appears that the ESM imports might be bugged? Whenever I try to create a non-line chart, I get this error:

❌ [billboard.js] Please, make sure if line background:red;color:white;display:block;font-size:15px module has been imported and specified correctly.

This error thrown with funnel, area, and bar charts - it is not thrown when I create a line chart.

Chrome on Linux: 132.0.6834.159
billboard.js: 3.14.3

Here's my component:

<template lang='pug'>
Slide
  div(class='w-5/6')
    div(:id='id')
  h1 Test
</template>

<script>
import bb, { funnel } from 'billboard.js'
import 'billboard.js/dist/billboard.css'

import Slide from '@/components/base/Slide.vue'

export default {
  name: 'FunnelChart',
  components: { 
    Slide
  },
  props: { 
    id: String,
    data: Array
  },
  mounted () { 
    bb.generate({
      data: { 
        columns: this.data
      },
      type: funnel(),
      labels: true,
      bindto: '#' + this.id,
      funnel: { 
        neck: { 
          width: { 
            ratio: 0.3
          },
          height: { 
            ratio: 0.5
          } 
        } 
      } 
    })
  } 
}
</script>

[netil]

Hi @RobSpectre, thanks for report. I'll go over it.

[netil]

I made a pure ESM import example.

• https://stackblitz.com/edit/vitejs-vite-wnrzcwuw?file=src%2Fmain.ts

It seems work without issue.
Would you mind try by changing the path?

import bb, { funnel } from 'billboard.js' // as-is
import bb, { funnel } from 'billboard.js/dist-esm/billboard.js'; // to-be

Sometimes bundler resolve wrongly(or based on your config) where to import esm.
If this fails, can you make a reproducible example?

[RobSpectre]

Thanks for the quick look @netil. I tried the dist-esm line and receive the following error:

[plugin:vite:import-analysis] Missing "./dist-esm/billboard.js" specifier in "billboard.js" package

Here is a reproducible example.

[netil]

@RobSpectre
hmm... I found wrong option usage.
The chart type should be specified within data, not at the top level.

bb.generate({
      data: {
        columns: [
          ['data1', 30],
          ['data2', 45],
          ['data3', 25],
          ['data4', 55],
        ],
        type: funnel(),  // <-- type need to be defined here
      },
      type: funnel(),  // <-- type should be specified within 'data'
  },
};

So, in your example threw error because when data.type isn't specified, is set default to be "line" type.
Checkout the working example

• https://stackblitz.com/edit/vitejs-vite-at5zss6m?file=src%2FApp.vue

[RobSpectre]

Ah biscuits - my bad @netil.

Love the library - appreciate the assist. Apologies for wasting your time.