[BUG] Uncaught ReferenceError: ApexCharts is not defined

[humbertodosreis]

I've trying use ApexCharts in my RoR 6 app, but occurred the error below:

My Gemfile:

source 'https://rubygems.org'
git_source(:github) { |repo| "/~https://github.com/#{repo}.git" }

ruby '2.6.3'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: /~https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: /~https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: /~https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
gem "bcrypt", "~> 3.1"

gem 'apexcharts', require: 'apexcharts/prefix_with_apex'
gem 'chartkick'
gem 'simple_form'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  # Use sqlite3 as the database for Active Record
  gem 'sqlite3', '~> 1.4'
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'rubocop', require: false
  gem 'web-console', '>= 3.3.0'
  # Spring speeds up development by keeping your application running in the background. Read more: /~https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

My app/javascript/packs/application.js

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");
require("chartkick");
require("chart.js");
require("apexcharts");

import "bootstrap"
import "../stylesheets/application"

const feather = require('feather-icons')

document.addEventListener("turbolinks:load", () => {
    feather.replace();
});

My app is built in:
Ruby 2.6.3
Rails 6
Webpacker

[KevinKP17]

have you try ?

//AMD
window.ApexCharts = require('apexcharts');
console.log(window.ApexCharts); // should return modules

// or
// Imports
import ApexCharts from 'apexcharts';
window.ApexCharts = ApexCharts; // return apex chart 

based on the apexcharts.js in order to import it you need to define the variables for it first
and you need to expose it via window.ApexCharts in order to use it outside webpack bundle

Thankss

[KevinKP17]

will need to update the documentation regarding webpack bundle
the current require('apexcharts') is worked if not using webpack (scope issue)

[styd]

Thank you @KevinKP17 for pointing out the documentation mistake. It seems that unlike Chartkick, ApexCharts doesn't expose itself to window by default. To be honest, I personally still use the good old sprockets for my app, therefore not very familiar with webpacker. I'm planning to migrate soon.

@KevinKP17, looking forward to your PR.

Edit:
I've tested it on new rails 6 app, and @KevinKP17 solution works for me.

[humbertodosreis]

Thank you @KevinKP17 , I've tested and your solution worked. I believe that needs update the documentation.

[styd]

Fixed by #47.

[askshrm]

I'm getting this same error, with latest versions (apexcharts@3.8.5 and ng-apexcharts@1.0.5) as well as the suggested (apexcharts@3.6.8 and ng-apexcharts@1.0.2) using Angularjs1.7

[styd]

Hi! I don't know how to use this gem with Angular. It's better to just use the ng-apexcharts.

[Flip437]

Hi everybody !

I've tried @KevinKP17 , solution but it doesn't work for me.
I'm trying to make 2 js files from a template working :

• apexchart.js
• demo.apex-bar.js

Let me explain :
I have html file from a template that looks like this :

<html>
  <head>
  [...]
  <!-- App css -->
  <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
  <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="col-xl-6">
          <div class="card">
              <div class="card-body" style="position: relative;">
                  <h4 class="header-title">Basic Bar Chart</h4>
                  <div id="basic-bar" class="apex-charts" style="min-height: 394px;">
                  <div id="apexchartsmm90i38y" class="apexcharts-canvas apexchartsmm90i38y" style="width: 698px; height: 380px;">      
        [...]
    </div>
  
    <!-- App js -->
    <script src="assets/js/app.min.js"></script>
    <!-- third party:js -->
    <script src="assets/js/vendor/apexcharts.min.js"></script>
    <!-- third party end -->
    <!-- demo:js -->
    <script src="assets/js/pages/demo.apex-bar.js"></script>
  </body>
</html>

There is no need of app.min.js to make a charts work. When I open this html files in chrome, with the 2 css files and 2 js files only, it works perfect.

So,

in my rails6 app, I put the 2 css files in css folder and those 2 js files in packs folder and import apexcharts.min.js and demo.apex-bar.js in that order. I put alert("blabla") in those 2 files to make sure webpack is going in. And I always get the Apexcharts is not definded !
I tried with import "apexcharts" to import it from node module instead of apexcharts.min.js but when I go in demo.apex-bar.js, I still go the error.
I also tried to put module.exports in apexcharts.min and import from in demo.apex-bar but it doesn't work.

It's been 4 days, 10 hours a day, I'm working on that and trying to understand how webpack compiles files but I can't figure it out.

If anybody know how to intergrate js files from template in webpack just let me know please !

Thanks everybody.

flip

[styd]

Umm.. what does your problem have to do with this ruby gem?
It seems like you don't use any ruby in the markup and use apexcharts.js directly.
Maybe you want to ask around about your problem here.

[Flip437]

Sorry,
I thought you guys where talking about integrating apexcharts js file in webpack. I opened this page directly from google and didn't it was about the gem.
Sorry about that.

[renancarvalhoo]

I'm having the same problem Uncaught ReferenceError: ApexCharts is not defined, but in my case using importmap

app/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: /~https://github.com/rails/importmap-rails
import "@tabler/core"
import "@hotwired/turbo-rails"
import "controllers"

import Cleave from "cleave.js"
import jQuery from "jquery"
import 'jquery.signaturepad'

import ApexCharts from 'apexcharts'
window.ApexCharts = ApexCharts

importmap.rb

...
pin "apexcharts", to: "https://ga.jspm.io/npm:apexcharts@3.37.3/dist/apexcharts.common.js", preload: true

[fzf]

Echoing @renancarvalhoo is there any documentation around how to set this up with importmaps?

[fzf]

@styd do know how to set this up for importmaps?

[styd]

@fzf This is how I make it work with importmap:

1. Download to local vendor directory (optional but recommended)

wget -O vendor/javascript/apexcharts.esm.js https://ga.jspm.io/npm:apexcharts@3.53.0/dist/apexcharts.esm.js

2. Pin "apexcharts" in config/importmap.rb

to local esm file (if you do No. 1):

pin "apexcharts", to: "apexcharts.esm.js"

or, to CDN URL

pin "apexcharts", to: "https://ga.jspm.io/npm:apexcharts@3.53.0/dist/apexcharts.esm.js"

3. Import and assign to window in app/javascript/application.js

import ApexCharts from "apexcharts"
window.ApexCharts = ApexCharts

4. Use it with options module: true

For example:

<% series = [{
    name: "Desktops",
    data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
  }]
  options = {
    chart: {
      height: 350,
      zoom: {
        enabled: false
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'straight'
    },
    title: {
      text: 'Product Trends by Month',
      align: 'left'
    },
    grid: {
      row: {
        colors: ['#f3f3f3', 'transparent'],
        opacity: 0.5
      },
    },
    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
    },
    module: true
  } %>
<%= line_chart(series, options) %>

[fzf]

Thank you @styd that worked, I can work on a pull request to update the readme.

[styd]

@fzf Sure.