How to bundle multiple ES6 modules into a single ES6 compatible bundle using Rollup

Question

I'm creating charts with HighCharts v10.x. The HighCharts NPM install includes all necessary ES6 modules.

The following works just fine.

At the top of MyChartingModule.js, I import the HighCharts modules like this:

import Chart from '../../node_modules/highcharts/es-modules/Core/Chart/Chart';   // 'Chart.js';
import Color from '../../node_modules/highcharts/es-modules/Core/Color/Color';
import LineSeries from '../../node_modules/highcharts/es-modules/Series/Line/LineSeries';
import ColumnSeries from '../../node_modules/highcharts/es-modules/Series/Column/ColumnSeries';
import PieSeries from '../../node_modules/highcharts/es-modules/Series/Pie/PieSeries';

This is the script tag:

<script type="module" src="../src/js/MyChartingModule.js" defer></script>

Now I want to use Rollup v2.70.x to bundle the five scripts into a single bundle so that it can be minified using rollup-plugin-terser. (I would also like to be able to dynamically load the resulting bundle.)

This is the approach that I've tried.

Contents of rollup/rollup.config.highcharts.js:

import {nodeResolve} from '@rollup/plugin-node-resolve';
// import {terser} from 'rollup-plugin-terser';

export default {
    input: './src/js/chart.bundle.js',
    output: {
        file: './dist/js/chart.esm.js',
        format: 'esm'
    },
    // plugins: [nodeResolve(), terser()]
    plugins: [nodeResolve()]

};

Contents of chart.bundle.js:

import Chart from '../../node_modules/highcharts/es-modules/Core/Chart/Chart';   // 'Chart.js';
import Color from '../../node_modules/highcharts/es-modules/Core/Color/Color';
import LineSeries from '../../node_modules/highcharts/es-modules/Series/Line/LineSeries';
import ColumnSeries from '../../node_modules/highcharts/es-modules/Series/Column/ColumnSeries';
import PieSeries from '../../node_modules/highcharts/es-modules/Series/Pie/PieSeries';

NPM script

"build:charts": "rollup --config rollup/rollup.config.highcharts.js",

Result of running script:

> rollup --config rollup/rollup.config.highcharts.js

loaded rollup/rollup.config.highcharts.js with warnings
(!) Unused external imports
terser imported from external module "rollup-plugin-terser" but never used in "rollup/rollup.config.highcharts.js"

./src/js/chart.bundle.js → ./dist/js/chart.esm.js...
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/highcharts/es-modules/Series/Pie/PieSeries.js
 9:  * */
10: 'use strict';
11: var __extends = (this && this.__extends) || (function () {
                     ^
12:     var extendStatics = function (d, b) {
13:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence
node_modules/highcharts/es-modules/Series/Line/LineSeries.js
 9:  * */
10: 'use strict';
11: var __extends = (this && this.__extends) || (function () {
                     ^
12:     var extendStatics = function (d, b) {
13:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence
node_modules/highcharts/es-modules/Series/Column/ColumnSeries.js
 9:  * */
10: 'use strict';
11: var __extends = (this && this.__extends) || (function () {
                     ^
12:     var extendStatics = function (d, b) {
13:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence

...and 3 other files
created ./dist/js/chart.esm.js in 1s

Replace the imports in MyChartingModule.js with a single import:

import {Chart, Color, LineSeries, ColumnSeries, PieSeries} from '../../dist/js/chart.esm';

After reloading the page, the Chrome console shows this error:

Uncaught SyntaxError: The requested module '../../dist/js/chart.esm' does not provide an export named 'Chart' 

Why did the resulting bundle drop the Chart export? And I assume the other exports.

What changes do I need to make to fix the problem?

Answer 1

For Rollup to successfully bundle, you need to add the exports to your input script, chart.bundle.js:

import Highcharts from '../../node_modules/highcharts/es-modules/Core/Globals.js';
import SVGRenderer from '../../node_modules/highcharts/es-modules/Core/Renderer/SVG/SVGRenderer.js';
import Chart from '../../node_modules/highcharts/es-modules/Core/Chart/Chart';   // 'Chart.js';
import Color from '../../node_modules/highcharts/es-modules/Core/Color/Color';
import LineSeries from '../../node_modules/highcharts/es-modules/Series/Line/LineSeries';
import ColumnSeries from '../../node_modules/highcharts/es-modules/Series/Column/ColumnSeries';
import PieSeries from '../../node_modules/highcharts/es-modules/Series/Pie/PieSeries';

const exports = Highcharts;

exports.Renderer = SVGRenderer;
exports.SVGRenderer = SVGRenderer;
exports.Chart = Chart;
exports.chart = Chart.chart;
exports.Color = Color;
exports.LineSeries = LineSeries;
exports.ColumnSeries = ColumnSeries;
exports.PieSeries = PieSeries;
export default exports;

Though it is an example for when using Gulp, here is a useful reference, Creating custom Highcharts files