How do I configure Apexcharts on Rails 7.1?

Question

I'm using Stimulus

It returns in the console:

Failed to register controller: indicators-chart (controllers/indicators_chart_controller) SyntaxError: The requested module 'apexcharts' does not provide an export named 'default'

I've already pinned importmap.rb:

pin 'apexcharts', to: 'https://cdn.jsdelivr.net/npm/apexcharts'

I already added it to package.json:

"apexcharts": "^3.45.1",I called the stimulus controller: import ApexCharts from 'apexcharts'; (Tried with { Apexcharts } and ApexCharts)

I expected a graph to be rendered and not give this error!

Answer 1

ApexCharts, when loaded from a CDN, may not use the standard default export that you would typically import with import ApexCharts from 'apexcharts'.

You can add ApexCharts to your app with Importmaps in two ways:

1. without specifying a target:

# config/importmap.rb
pin "apexcharts"

This approach allows Importmap to resolve and load ApexCharts automatically, offering simplicity but less control over the exact version and source of the library.

2. By specifying a CDN target:

# config/importmap.rb
pin "apexcharts", to: "https://ga.jspm.io/npm:[email protected]/dist/apexcharts.common.js"

This method explicitly sets the version and source, ensuring compatibility with Importmaps and providing precise control over the library's version.

This works because it specifically targets a module format compatible with Importmaps. The default CDN link from the ApexCharts documentation may not support Importmaps directly due to its export pattern.

then import the module at the top of your stimulus controller as you did.

import { Controller } from "@hotwired/stimulus"
import ApexCharts from 'apexcharts'

export default class extends Controller {
  static targets = ['chart']

  connect() {
    this.chart = new ApexCharts(this.chartTarget, { chartOptions })
    this.chart.render()
  }
}

Note : Adding ApexCharts to your package.json file is redundant; Importmaps are designed for direct browser imports without a build step, whereas package.json is used for managing dependencies within a build process. Choose one method based on your application's architecture and deployment strategy.