Chart from charting library doesn't work in webpack-encore

[kinekt4]

Summary

A chart (Brush Chart) from a charting library (ApexCharts) does not work in symfony/webpack-encore-bundle.

The chart on codepen: https://codepen.io/apexcharts/pen/rqWeBX

Resulting error when implemented in @symfony/webpack-encore:

Uncaught (in promise) ReferenceError: ApexCharts is not defined
    at apexcharts.common.js:6
    at Array.forEach (<anonymous>)
    at t.value (apexcharts.common.js:6)
    at t.value (apexcharts.common.js:6)
    at t.value (apexcharts.common.js:14)
    at t.create (apexcharts.common.js:6)
    at apexcharts.common.js:14
    at new Promise (<anonymous>)
    at t.value (apexcharts.common.js:14)
    at HTMLDocument.<anonymous> (brush.js:129)

I've reported the issue with ApexCharts but haven't got a response from them as yet: apexcharts/apexcharts.js#2315

Reproduce

Install framework and required backend and frontend components

symfony new apexcharts --version=4.4 --full
cd apexcharts
composer install
composer require symfony/webpack-encore-bundle
npm install

Setup controllers and assets

# Add new controller
php bin/console make:controller
# Setup new entrypoint in webpack.config.js
# .addEntry('brush', './assets/brush.js')
# Create assets
touch templates/chart/brush.html.twig
touch assets/brush.js
touch assets/css/brush.css

Contents of brush.js

import './styles/brush.css';
import './bootstrap';
import ApexCharts from 'apexcharts';

document.addEventListener("DOMContentLoaded", function (event) {

    // Paste contents from
    // https://codepen.io/apexcharts/pen/rqWeBX

});

Environment

OS: Fedora 33
PHP: 7.4
Symfony: v4.4
symfony/webpack-encore-bundle: v1.11
npm: v7.6.2
ApexCharts: v3.26
Browsers Tested: Opera, Chrome, Firefox

[kinekt4]

From what I can tell ApexCharts hasn't been extensively tested with bundlers such as webpack: apexcharts/apexcharts.js#1760

[stof]

This indeed looks like the apexcharts.js bug where the library does not work fine with webpack. That's not an issue in webpack-encore so I'm closing this ticket. There's nothing encore can do here.

[kinekt4]

I can replicate this issue in vanilla webpack. So yes, not a webpack-encore issue.