I’m trying to use rollup to build a bundle containing highlight.js.

This is the starter project I’m using to build the bundle. If we clone it and run:

git clone [email protected]:fireflysemantics/fs-lit-element-starter-ts.git b
cd b
npm i 
npm run rollup

We can see that the bundle is built without any errors.

And if we add highlight.js and import the default into src/my-dispatcher.component.ts, the following error is created.

npm i highlight.js

Import the default.

import hljs from "highlight.js";

Reference hljs on a property so that we don’t get any linting errors.

h:any = hljs;

If we now run npm run rollup again the following error is produced.

Thoughts?

./build/index.js → ./build/index.bundle.js...
(!) [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
[!] RollupError: node_modules/highlight.js/es/index.js (2:7): "default" is not exported by "node_modules/highlight.js/lib/index.js", imported by "node_modules/highlight.js/es/index.js".
https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module
node_modules/highlight.js/es/index.js (2:7)
1: // https://nodejs.org/api/packages.html#packages_writing_dual_packages_while_avoiding_or_minimizing_hazards
2: import HighlightJS from '../lib/index.js';
          ^
3: export { HighlightJS };
4: export default HighlightJS;
    at getRollupError (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/parseAst.js:282:41)
    at Object.error (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/parseAst.js:278:42)
    at Module.error (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:15321:28)
    at Module.traceVariable (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:15769:29)
    at ModuleScope.findVariable (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:13480:39)
    at Identifier.bind (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:8386:40)
    at ExportDefaultDeclaration.bind (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:6255:23)
    at Program.bind (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:6251:28)
    at Module.bindReferences (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:15302:18)
    at Graph.sortModules (/Users/oleersoy/Temp/b/node_modules/rollup/dist/shared/rollup.js:20535:20)

Just for reference this is the rollup configuration.

/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */

import summary from 'rollup-plugin-summary';
import terser from '@rollup/plugin-terser';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';

export default {
  input: './build/index.js',
  output: {
    file: './build/index.bundle.js',
    format: 'esm',
  },
  onwarn(warning) {
    if (warning.code !== 'THIS_IS_UNDEFINED') {
      console.error(`(!) ${warning.message}`);
    }
  },
  plugins: [
    replace({'Reflect.decorate': 'undefined'}),
    resolve(),
    /**
     * This minification setup serves the static site generation.
     * For bundling and minification, check the README.md file.
     */
    terser({
      ecma: 2021,
      module: true,
      warnings: true,
      mangle: {
        properties: {
          regex: /^__/,
        },
      },
    }),
    summary(),
  ],
};